[Resolved] page view on desktop different on mobile device

Home Forums Support page view on desktop different on mobile device

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #136001
    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

    #136012
    Jean

    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.

    😀

    #136013
    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

    #136014
    Jean

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

    #136151
    Nam Nguyen

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.