• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 276
  • Last Modified:

remove photos from displaying on mobile site

Is there a way to "hide" photos from displaying on a mobile site?  Right now, the photos are so wide that they don't fit the mobile screen right and there is a big black right margin to accomodate the image width.  If you go to the below address on your phone, you will notice that the Reader's Choice awards push off edge of website.  Every page on this site has an image in the right column.  Other pages have images of people that I also want to hide.

1 Solution
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Since you are using media queries, in your individual css style sheets for each viewport you can manipulate the size of the image or simply hide it.  http://www.nsitedesigns.com/nsitedesigns/wrb/css/screen_layout_small.css

You can give the image a class, then on the css for small.css



Steven HarrisPresidentCommented:
You can also specify the "mobile" display size as

@media screen and (max-width: 480px)
img { display: none; }

Open in new window

nsitedesignsAuthor Commented:
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now