SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    UK
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi Yarik. Welcome to the forums.

    This is your culprit:

    Code:
    #site-info p {
      width: 960px;
      margin: 0 auto;
      font-size: 12px;
      color: gray;
    }
    Nice looking site, by the way.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    UK
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Yarik View Post
    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.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    UK
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.
    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.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Yarik View Post
    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.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    UK
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Yarik View Post
    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.

  9. #9
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    UK
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Yarik View Post
    I applied max-width: 100% to the image and width was fine, but height didn't change accordingly.
    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?

  11. #11
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    UK
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Yarik View Post
    Yes. You are right))). Fixed dimentions for the image. Now it looks good. Thanks.
    Great, glad it's fixed.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •