Archived topic

Is there a way to adjust header element padding let it fit to iPad screen?

3 replies · Started by Stephen on July 1, 2020

Viewing posts 1–4 of 4

July 1, 2020 at 7:09 pm #1348916

Hi, this is Chris from 10 Magazine. South Korea.
I am working on building a site for client, now working on adjusting screen sizes on different devices.

There is only mobile and PC mode on padding adjustment for header element, see link here

My question is how can I optimize the header padding for Header element?

Thanks,

July 2, 2020 at 3:43 am #1349201

Hi there,

you can use some CSS like so:

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

If its a full width hero that only contains a background image, then % padding can keep the image responsive across all sizes. Just make the total top+bottom padding equal the original images asepct ratio eg. Height / width * 100.

November 17, 2020 at 7:05 pm #1535503

Confirmed.

November 18, 2020 at 2:02 am #1535743

Glad to hear that

This archived topic is closed to new replies.

Start building better websites today.