hiding or changing alignment of image under a certain number of pixels

• 

  arbsdesign · Member · Mar 4, 2017 at 10:30 am

  • Copy link
  • Add topic to favorites

  Hi

  I need help with some images on my site, the images I am talking about are the images on the testimonials on the home page. they look fine but on mobile they don’t align very well and are too big so I either need to hide them or to centrally aligns them over the text rather than to the right like on a computer size screen.

  I am pretty sure I need a media query BUT I don’t know how to target specific images in CSS?

  any ideas?

  Thanks

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

• 

  innisfreehomestead · Member · Mar 6, 2017 at 1:50 am

  • Copy link

  Hello there!

  Dropping this code in your custom CSS area should do the trick:

  @media screen and (max-width:768px) {
  .home blockquote img {
  	float: none;
  	margin: 0 auto;
  	display: block;
  }
  }

  Or, if you’d like the images not to show at all, you can take out the “float” and “margin” lines and change the display to “none” instead of “block.”

  Let me know if that doesn’t work!
  Sage

• 

  arbsdesign · Member · Mar 9, 2017 at 4:06 pm

  • Copy link

  Worked perfectly thank you!!!

• 

  innisfreehomestead · Member · Mar 9, 2017 at 4:27 pm

  • Copy link

  Fantastic, my pleasure!

  Sage