[Resolved] page view on desktop different on mobile device

[Nam Nguyen]

Hi support,

I’m using CSS to insert a image (a colors bar) on top of each page (rather than using the page header within each page). See url (not the front page)

https://www.clubtinytots.com.au/

.page-id-25 .inside-article {
background-image : url(‘https://www.clubtinytots.com.au/wp-content/uploads/2015/07/3.png’);
background-size : contain;
background-repeat: no-repeat; */
}

This is because I want to use ‘element spacing’ in each page (inside-article) to make the page sit within a background (with a gap between it and the menu bar).

To avoid the page heading sits inside the image, it needs to be moved further down the page, and I achieve this by giving the ‘content’ a padding-top of 190 px.

This allows me to achieve the look I wanted, however, when I view the website on a smart phone, the page heading appears to be much further down the page, leaving a blank gap between itself and the inserted image.

Could you please advise how I could ‘get rid of’ this blank gap in the page when viewed on a smart phone ?

Thanks
Nam

[Jean Paiva]

Hey Nam,

You can change your ‘padding-top’ from pixels to percentages, try: padding-top: 20%; this way the space between the title and the top will always be 20% of the viewport.

😀

[Nam Nguyen]

Hi Jean,

I used the element spacing under Appearance -> Customizer -> Element Spacing, which only accepts px, not %.

What is the CSS to do this?

Regards

[Jean Paiva]

Try this one: .separate-containers .inside-article { padding-top: 20%!important; }

[Nam Nguyen]

Thanks Jean,
Works like a charm !
Thanks for your help
Nam

[Author]

Posts