Premium Theme Support › Themes Harbor › Appetite

Remove Page Title Sections on Mobile Only

  • Author
    Posts
  • #162100
    staceyboulter
    Member

    Hello again :)

    I think this is the last question I will need to ask you.

    I like the way that my site looks on desktop, but I don’t like the way it looks on mobile. So, I was wondering how I could completely remove the page title sections (on the About, Contact, and Support pages) on mobile so that it just displays the site header, main page, and footer (while leaving everything about the desktop layout intact, as well as the mobile blog post page title sections.

    I’m not sure if that makes sense. I hope that it does.

    Thanks,
    -stacey

    #162121
    tarasdashkevych
    Theme Author

    Hello Stacey,

    By default, neither WordPress nor theme do not provide an option to hide the page header in smaller screens. However, it’s possible to do with a custom CSS.

    I can help you with a custom CSS but I need to inspect those pages (About, Contact, and Support pages). Could you please post a link to those pages?

    Also, if you site is in a private mode, please make sure to make it public, so I can access your site.

    Kind regards,
    Taras

    #162124
    staceyboulter
    Member
    Original poster

    The site is public now. And this is the link: https://nikonzen.com

    #162126
    tarasdashkevych
    Theme Author

    Stacey,
    Thank you for making your site public.

    Below you can find a custom CSS which you can use to hide your About and Contact pages in mobile views:

    
@media (max-width: 500px) {
  .page-id-1125 .page-header,
  .page-id-686 .page-header {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
  }

  .page-id-1125 .site-content,
  .page-id-686 .site-content {
      margin-top: 2rem;
  }
}

    Where 1125 is the ID of your About page, and 686 is the ID of your Contact page.

    You can find the ID of your page using the admin panel: https://wordpress.com/support/pages/#how-to-find-the-page-id

    Please let me know if you have any additional qeustions.

    Kind regards,
    Taras

    #162128
    staceyboulter
    Member
    Original poster

    Thank you for your help. I think it looks much better now.

    Take care.

    Gassho,
    -stacey

    #162139
    tarasdashkevych
    Theme Author

    You are always welcome, Stacey!

    Kind regards,
    Taras

  • The topic ‘Remove Page Title Sections on Mobile Only’ is closed to new replies.