Home Forums Meteorite Mobile Style

This topic is: resolved

This topic contains 8 replies, has 2 voices, and was last updated by  JuanMZC 8 months, 1 week ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #959

    JuanMZC
    Participant

    How can I change the page top height from 100px to 10px for mobile only?

    Screenshot: https://we.tl/wx3UidqqZb

    #960

    Terra Themes
    Keymaster

    Do you want to change only the top padding of only the first row of all pages? Then you could use something like this:

    .panel-grid .panel-row-style:nth-child(1) {
      padding-top: 10px !important;
    }

    You may have to check all pages whether this is causing something you don’t want. Alternatively you can go into the row settings and add
    padding-top: 10px !important;
    to the Mobile CSS Style located in Attributes.

    Please let me know how this works for you.

    #961

    JuanMZC
    Participant

    Yes, I do want to change only the top padding of only the first row of all pages.

    I’ve just tried that code but it’s applied padding:10px to all rows of all pages. So, that doesn’t work.

    I can’t do it page by page as I want to apply this rule, for example, to my account page and that page is not build with page builder.

    #962

    Terra Themes
    Keymaster

    Well, I did a small mistake in that code. To apply that for mobile devices and only the first row, try out this.

    @media only screen and (max-width: 991px) {
      .panel-layout .panel-grid:nth-child(1) .panel-row-style {
        padding-top: 10px !important;
      }
    }

    You could also apply this to certain pages by adding the page ID to the rule. The page ID can be found as a class from the body tag.

    @media only screen and (max-width: 991px) {
      .page-id-658 .panel-layout .panel-grid:nth-child(1) .panel-row-style {
        padding-top: 10px !important;
      }
    }

    For pages that are not using the page builder the padding is handled by .site-content. That can be changed with this rule. Add the page IDs here too, if you need to.

    @media only screen and (max-width: 991px) {
      .site-content {
        padding-top: 100px;
      }
    }

    Off Topic: I saw you haven’t set a menu for the 404 page. You might want so, otherwise all pages are listed including some test pages.

    #963

    JuanMZC
    Participant

    Thanks for your reply.

    What is the page id of these pages?

    Little Bay Property Settlement


    https://alternativedebt.com.au/blog/

    Receivables Finance Expert Tips and Strategies

    Thanks for your ‘off topic’. I didn’t realise about that. I’ve just set up the menu for 404 page.

    #964

    Terra Themes
    Keymaster

    The page IDs are:

    Little Bay Property Settlement: .postid-7985

    Blog: .blog

    Receivables Finance Expert Tips and Strategies: .postid-7592

    If you need to set it up for all posts and projects, you can use something like .single-post, .single-projects or simply .single instead to target them in general.

    #966

    JuanMZC
    Participant

    Thanks so much for your help! That works. You can mark this topic as resolved ๐Ÿ™‚

    • This reply was modified 8 months, 1 week ago by  JuanMZC.
    #969

    Terra Themes
    Keymaster

    You’re welcome. If not already done, I would really appreciate your rating at wordpress.org! ๐Ÿ™‚

    #970

    JuanMZC
    Participant

    More than happy to give my feedback ๐Ÿ™‚

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.