FEATURED IMAGE SIZE CONTROL AT POSTS HEADING

[bunckstudio]

Dear Sea theme team,

We started building our webpage a year ago with the Air wordpress theme, we didn’t know about support, and have extended it now. It would have been so much easyier with your help.
We weren´t able to control the size of the featured images at the beggining of each post, so we (great mistake) changed the size of these featured images until we reached the visible size we wanted.
We are about to launch the webpage, and have now realised, that the mobile phone adjustment, is cutting all of our featured images.

I suppose we should now re-upload all these images in the correct format, and then control the size of it on posts with a line of CSS.

Thank you for your help.

[SeaTheme]

Hi there,
Welcome to SeaTheme forum.

I am not sure if understood your question. Did you mean the Featured image on a single post page? The Featured image should not be cut on a single post page. Could you please leave an issued page URL? Thanks!

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[bunckstudio]

Hello,

The thing is, I did a “very wrong” workaround to achieve the size I wanted for the featured images both at the masonry grid and at the beggining of each post, where I have the featured image activated.
I added whitespace at both of the sides in all the images so that they would resize at the posts.

WEBPAGE: https://bunck.studio/

The uploaded images had this format:
https://bunck.studio/wp-content/uploads/2021/07/JUSTA-FREIRE-14_WEB_FRONTPAGE_CIRCULO_Ancho-scaled.jpg

I didn’t realise that it was totally wrong until I tried the mobile phone view of the web page, where all the “circles” are too big and get cut.

I have now changed all the featured images for the correct format, and need to resize them at the beginning of the posts, so that the circles havea smaller scale.

These are the new images, but they still get cut at the mobile phone view, and I need to control their size at the posts:
https://bunck.studio/wp-content/uploads/2021/07/JUSTA-FREIRE-14_WEB_FRONTPAGE_CIRCULO.jpg

Thank you for your help.

[SeaTheme]

Hi, thanks
If you want to make the featured image is not cropped on a single project page for mobile, please paste the custom CSS code to “Appearance > Customize: Additional CSS”:

@media (max-width: 991.98px) {
 .single-format-gallery .fullscreen-wrap.post-cover { 
    height: 100vw;
 }
}

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[bunckstudio]

I haven´t explained myself.

We want these featured image “balls”, to appear smaller at all the posts.
And we need them all to shrink on mobile view, because they are now cut on both sides.

Here you have two screenshots explaining myself.

https://bunck.studio/wp-content/uploads/2021/11/CUT-BALLS-AT-MOBILE-VIEW.png

Thank you.

[SeaTheme]

Hi, thanks for response.

Please paste the custom CSS code to “Appearance > Customize: Additional CSS”:

 .single-format-gallery .post-cover .ux-background-img { 
    background-size: 80%;
    background-color: #fff;
}
@media (max-width: 991.98px) {
 .single-format-gallery .fullscreen-wrap.post-cover { 
    height: 75vw;
 }
 .single-format-gallery .post-cover .ux-background-img {
    background-attachment: scroll;
 }
}

Please don’t remove the CSS even if it doesn’t work, or I will not know where is wrong.
ps: the fixed background image is disabled for mobile.

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[bunckstudio]

Thank you,

That’s exactly what we needed.

But we would now like to reduce the space between the balls and the Title in the mobile and tablet view.

https://bunck.studio/wp-content/uploads/2021/11/REDUCE-SPACE-BETWEEN-BALL-AND-TITLE.png

[SeaTheme]

Welcome!

Please add the custom CSS:

@media (max-width: 992px) {
 .responsive-ux.single-portfolio-fullwidth .title-wrap {
    padding-top: 20px;
 }
}

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[bunckstudio]

Hello,

We are visualizing the mobile view correctly at wordpress, but when we access the webpage from an actual mobile phone, it loads correctly for a second and then it goes back to another format with a big white spacing.

We are also having trouble with the visualization of the homepage in mobile view. The logo is being cut by the empty/white heading.

Thank you

[bunckstudio]

We would also need to reposition the slider in mobile view, so that it appears at the center of the display, it is now slightly to the right.

Thank you.

[bunckstudio]

We also need to reduce the font size of the posts titles at the mouseover effect over the balls.
We cant find at the general font settings, which line is controlling the size of the mouseover effect.

Thank ypu.

[SeaTheme]

Hi,

I checked the slider page, it is from a 3rd plugin. Is wonderpluginslider-container or elementor? I have no idea how to fix it, you can check if there is mobile options in this plugin.

Or you can consider to use BM slider.

For the mouseover font size, please find it in theme option here: https://www.dropbox.com/s/x765he8x5gb7amq/QQ20220503-213731.jpg?dl=0

—————
If it doesn’t work, may I check your website? Could you please leave your wp-admin access (URL / username/password) by picking up “Set as private reply”?

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[bunckstudio]

Hi,

The font size solved, thank you.

About the 3rd party slider, I’ll try to do the workaround or change to BM slider. We used this one, because BM slider lacked some functionality we needed.

The most important part which isn’t working is in our first message:

We are visualizing the mobile view correctly at wordpress interface, but when we access the webpage from an actual mobile phone, it loads correctly for a second and then it goes back to another format with a big white spacing.

We are also having trouble with the visualization of the homepage in mobile view. The logo is being cut by the empty/white heading.

Thank you.

[SeaTheme]

Hi,

I checked the slider page again, I found size(700k – 2.7M) of the image files are too huge for a website.

I suggest you use JPG format instead of PNG, the size should be less than 200k. Check how optimize image size. It may fix the issue on mobile.

If there is this issue still, I suggest you submit a ticket to the slider author team also, the author may find where is wrong.

And I did not find the logo cutting issue, the screenshot on my mobile:

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[bunckstudio]

Hi,

Thanks, I’ll start to re-upload all images which are too big. Anyway, I don’t think the slider in the home page is the issue (Which i am working on solving aswell).

It’s all working fine now except for the posts which are affected by the CSS.

Please check the mobile phone view once you get to the projects posts and click on any of them. Here are some captions of the issue:

PROJECTS GALLERY

LOADS CORRECTLY FOR A SECOND
https://bunck.studio/wp-content/uploads/2021/11/LOADS-FOR-A-SECOND-LIKE-THIS-WHICH-IS-CORRECT.jpg
THEN CHANGES TO THIS
https://bunck.studio/wp-content/uploads/2021/11/AFTER-IT-CHANGES-TO-THIS.jpg

[SeaTheme]

To solve the cover image of projects posts on mobile:
Please find the custom CSS on “Appearance > Customize: Additional CSS”:

.single-format-gallery .fullscreen-wrap.post-cover {
height: 50vw;
}

update as:

 .single-format-gallery .fullscreen-wrap.post-cover {
height: 50vw!important;
}

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[Author]

Posts