Removing Title on Mobile View via CSS

• 

  melanieianderson · Member · Sep 17, 2015 at 10:00 pm

  • Copy link
  • Add topic to favorites

  Hi!

  I’m trying to figure out how to hide the duplicate title, only on the mobile version of the site I’m working on, using CSS as part of my Sketch Theme. An example if you browse to on a mobile device is ‘Artwork’ showing up twice here: https://maryannecaibaiosai.wordpress.com/artwork/

  Any idea on how to hide this so only one title shows for mobile browsing?

  Thanks,
  Melanie

  The blog I need help with is: (visible only to logged in users)

• 

  timethief · Member · Sep 17, 2015 at 10:02 pm

  • Copy link

  Sketch is a responsive layout theme.

  The mobile ready theme is default and a completely different theme that you do not need to enable at all when you are running a responsive layout theme. https://theme.wordpress.com/themes/features/responsive-layout/

  A responsive layout theme adapts to different screen sizes so that your website will work (and be optimized for) iPhones, iPads, Android and other mobile devices. When responsive width themes are viewed on mobiles sidebars appear below the posts in order to provide as much space as possible for reading.

  When we use a responsive theme we disable the mobile theme. Go to > Appearance > Mobile and disable the mobile theme.

• 

  melanieianderson · Member · Sep 17, 2015 at 10:08 pm

  • Copy link

  Thanks! Yes, I’m aware it is a responsive layout theme, I actually like the look better having the mobile theme enabled. My challenge with this though is hiding the title on most of the pages since it seems to be appearing twice. Any ideas on how to do that as part of the custom CSS? Thanks! :)

• 

  timethief · Member · Sep 17, 2015 at 10:13 pm

  • Copy link

  Okay then. I don’t help with CSS editing so you will have to be patient while waiting for help with it.

• 

  thesacredpath · Member · Sep 18, 2015 at 3:57 am

  • Copy link

  Melanie, add the following to hide the page titles on the mobile theme.

  .mobile-theme .page .entry-title {
  	display: none;
  }

  Note that this will hide page titles on all static pages.