Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Mobile auto width not working on some pages.

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #43648
    svoltmer
    Participant

    I am working the mobile styles for a site, but there are several pages that are not re-sizing even though the width is set to auto. Can someone take a look?

    https://edit-wwwprep.rose-hulman.edu/offices-services/academic-affairs/faculty-achievements/faculty-authors.aspx

    #129707
    gilgimech
    Participant

    If I would do it, I would make the width 98% instead of auto.

    Try that and see if it works for you.

    #129711
    Dheer
    Member

    I went through your website and I observed the following:

    1. All sections are getting re-sized except .mainColRegL2, so the problem is most likely in the css for that section.

    2. Your mobile.css uses the @media query for:

    (min-device-width: 320px) and (max-device-width:1280px).

    That leaves out any devices smaller than 320px. You could alternatively use:

    media=”screen and (max-width:1280px)”

    It would serve the same purpose, allow devices less than 320px wide and allow testing the responsiveness in the browser.

    3. After playing with a bit more, by saving a local copy and implementing the change suggested in #2, I was able to identify the source of your problem. It is on line 2191 in mobile.css:

    #mainReg .mainColRegL2 {
    width:auto !important;
    padding-left:10px !important;
    padding-right:10px !important;
    }

    Change that to:

    #mainReg .mainColRegL2 {
    width:100%;
    padding:0;
    }

    This will solve this issue, but you may want to look into using a css reset.

    Eric Meyer’s Reset or Normalize.css may be a good start.

    This will also help:
    https://css-tricks.com/box-sizing/

    #129778
    svoltmer
    Participant

    Thanks for the suggestion, but I can’t use 100% width as I have to have a 10px padding on both sides.

    #129781
    Paulie_D
    Member

    You can if you use `box-sizing:border-box` can’t you?

    Of course, that might break other things.

    #129787
    svoltmer
    Participant

    I would like to know why it works with auto on this page:
    https://edit-wwwprep.rose-hulman.edu/offices-services/academic-affairs/faculty-achievements/fulbright-scholars.aspx
    but not the one in my original post. They both use the same container .mainColRegL2

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.