Horizontal page scrolling when developing for 800px with media queries

Hi gus. I have an issue with horizontal page scrolling when I use styles for @media screen and (max-width: 800px). I gave my containers fluid layout in % an all styles seems to be correct, though I have this scrolling. Also on an IPad simulator it shows whole page without scrolling of course but the content is moved to the left. What can be the cause? Its alinamihai.com. Thanks.

Hi Yarik. Welcome to the forums. :slight_smile:

This is your culprit:


#site-info p {
  [COLOR="#FF0000"]width: 960px;[/COLOR]
  margin: 0 auto;
  font-size: 12px;
  color: gray;
}

Nice looking site, by the way. :slight_smile:

Hi Ralph. Oh yea. I thought only about my containers with fixed width but forgot that I have to care about all elements fixed width. Thanks.

Yeah, you really don’t need to be setting widths on those inner block elements anyway, as they naturally expand to width: 100% by themselves. :slight_smile:

Now it looks much better. What would you do if you need to remove an element from the DOM at a certain screen resolution? Would you use jquery? I have an image in “About” page. When looking on mobile devices like Iphone and Android phones it looks funny cause has fixed width. I thought to remove it from the DOM cause its not really important to see it on a mobile device.

You have several options here in terms of CSS:

  1. Give the image a % width so that it scales to fit the available space, or set a different width for it on smaller screens;
  2. serve up the image as a background image on larger screens but don’t include it in the CSS for smaller screens;
  3. give the image display: none for smaller screens.

Option 3 should be avoided, though, as the device still downloads the image, so the user loses pays for bandwidth and doesn’t even get to see the image! My preference tends to be option 2, but it depends on your needs. If you want the image to display, you can size it to suit, but for images that are just decorations, I would use the background image method and just not serve it up to mobiles.

That image was added in CMS as a content element. You think it was better to add a div tag with a background image. Always developing on a CMS I am thinking to do in the way that any user with poor html skills could add content. Do you think it is too much?

Ah, well, if the user is uploading images, then best to have it in the HTML. In that case, perhaps just set up some CSS rules for handling images. You could either give the image a % width, or perhaps just give images a max-width, so that the user can’t insert an image that’s too big visually.

Yep. I applied max-width: 100% to the image and width was fine, but height didn’t change accordingly. Max-height: 100% didn’t work, height: 100% stratches picture.

Alas, poor Yarik! That’s odd. The images should scale in both directions. Is there a fixed height set for it, either in the HTML or CSS?

Yes. You are right))). Fixed dimentions for the image. Now it looks good. Thanks.

Great, glad it’s fixed. :slight_smile: