Docs

[sergiopontoriero]

Hello, I have placed some images in the background of my home page but I notice that they are not completely responsive.
Please see the attached images to check how the background image looks (properly) on the PC and not properly on the smartphine simulator.
Where can I adjust the command for proper responsive adaptation of background images? I want them to be displayed completely and without any cut on the sides. Thank you!

[Joao]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks

[sergiopontoriero]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing back. It looks responsive on smaller devices as well. If you want to show the full image width then you can set background-size: 100% auto; but since your sections are long in height, it won’t look good as the background image will be missed on top and bottom. So what you are getting is best possible responsiveness according to your setup.

Hope this makes sense.

[sergiopontoriero]

Thanks for your reply. Can you please tell me where I can place the “background-size: 100% auto” information?
Also, can you please clarify how do I change the dimension of the font of headings and of body?
I tried to change the body font size from the customize area, but actually the body font size did not change at all…
Thank you!

[Rad]

Hi there,

Please add it to your section’s style input/option. It’s the section where you added the background image.

Each element can be wrapped by another element, and that wrapper may have its own font styling. Hence, it may or may not change the body font size (it’s only applicable for plain content).

Your home page uses custom headlines, and each type has its own font size. But if you wish to change the size regardless of type then please add this CSS to Admin > Appearance > Customizer > Custom > CSS

.h-custom-headline {
font-size: 60px !important;
}

As for the body, what part of the body content you’re targeting? Example, some of the element is recent posts element and it has its own styling that isn’t related to customizer.

Thanks!

[Author]

Posts