Hide featured image in mobile view

• 

  kimlich · Member · Apr 9, 2015 at 9:04 pm

  • Copy link
  • Add topic to favorites

  Hi there: Is it possible to hide the featured image during mobile view? It crops oddly where all you can see is the baby’s hand. I’d prefer in that case just to have a bg color. thanks!

  Home

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

• 

  shawnajroberts · Member · Apr 9, 2015 at 10:09 pm

  • Copy link

  Hi there! You can definitely do this with some custom CSS. Are you familiar with CSS?

  If CSS is new to you, here’s a site we built for Press Publish that will help you hit the ground running with the basics:

  https://cssworkshop.wordpress.com/

  In order to target a specific screen size (mobile), you’ll need to use what’s called a “media query” You can learn more about using media queries that target certain screen sizes here:

  • http://en.support.wordpress.com/custom-design/custom-css-media-queries/
  • http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
  • http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

  Media queries are a simple concept but powerful in practice, and can take some experimentation and testing to get right.

  Let me know if you need more help once you have some code you’ve tried. :)

• 

  kimlich · Member · Apr 14, 2015 at 8:29 pm

  • Copy link

  Hi there! I tried experimenting with a couple different versions of a media query but I’m having trouble figuring out what piece controls the image. I tried

  @media screen and (max-width: 400px)
  .hero.with-featured-image
  {display: none;
  }

  Also
  
  @media screen and (max-width: 400px)
  #background-image
  .hero.with-featured-image
  {display: none;
  }

  Thoughts?

• 

  shawnajroberts · Member · Apr 15, 2015 at 4:59 pm

  • Copy link

  These are great attempts! Awesome job! And you’re actually super close! There’s just a slight formatting issue. Here’s the code that I came up with:

  @media screen and (max-width: 400px) {
  .hero.with-featured-image {
  	background-image: none;
  	}
  }

  I have all the same pieces as you, just in a slightly different order. Take a look and let me know if you have any questions! :)

• 

  kimlich · Member · Apr 19, 2015 at 12:55 am

  • Copy link

  So close! Thanks for your help!

• 

  kimlich · Member · Apr 19, 2015 at 12:55 am

  • Copy link

  So close! Thanks for your help!