[Resolved] Merch Blog Featured Image Size

[Math]

Hi,

On the Merch blog page, I adjusted the padding on the Elements from 320px padding on top and bottom to 405px padding on top and bottom because I wanted to see the full image instead of a wide long image.

It worked, but it doesn’t seem to be scaling well into the tablet view. Can you please let me know if there’s additional CSS adjustments needs to be made for tablet?

Thank you.

[David]

Hi there,

in the Header Element there is a mobile option for controlling the padding. Click the mobile icon to set that.

[Math]

Hi,

Are you referring to the Padding with the mobile icon? The issue is that it works well in a large screen and it works well in small mobile screen, but I don’t see an option for tablet sizing.

The mobile scaling doesn’t kick in until (max-width: 768px). What about between the full screen and mobile?

[Tom]

Hi there,

For now you’ll need to use some CSS.

You can use a plugin like Simple CSS to add CSS to that specific page, or you can give the Header Element a custom class and target it:

@media (max-width: 1024px) and (min-width: 769px) {
    .page-hero.your-custom-class {
        padding-top: 200px;
        padding-bottom: 200px;
    }
}

You can also experiment with the % unit for the adding, which may be more responsive.

[Math]

Made some tweaks to the padding at top and bottom, but it seems to have done the trick. Thank you.

[Tom]

You’re welcome 🙂

[Author]

Posts