Problem with top and bottom padding on a block

Support
#1

Hello, I trust you’re doing well.

We’re trying to make the layout match the design we got from the client. We’re having issues with the top / bottom padding of a block.

For the block, we’ve set an image background with a fixed height of 784px., we’ve also set a top and bottom padding of 8%… this is what it looks like on a large monitor:

But if we view on a smaller screen, the text doesn’t look vertically centered as it does on the large screen

… how can we set this correctly? Can you please help?

#2

Hi @Jacko_Pinto,

Thank you for reaching out to us. I believe it’s happening due to your fixed height, you can fix this by setting the height to auto in smaller screens. To do this, first give your section a class e.g height-fixand then add the following code in the Theme Options > CSS:

@media screen and (max-width: 979px) {
    .height-fix {
        height: auto !important;
    }
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#3

Thanks very much for your help. I will try that.

Will that code affect only small screens?

Also, Is the 8% top and bottom padding adequate? Would you suggest I adjust that?

Thanks!

#4

Hello Jacko,

Tanks for updating the thread.

Yes, it will apply only on mobile and tablet screens or a device that has resolution of 979px. To learn more about media queries, I suggest you to take a look at following resources.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

It totally depends on the requirement. However, to me it looks fine but again it depends on the requirement and how you want the element to show up. For best possible result I suggest you to play around with the values and see how it shows up.

Thanks.

#5

Got it.

Thank you very much for your help with this issue.

#6

Glad we could help.

Cheers!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.