- This topic is empty.
-
AuthorPosts
-
March 25, 2013 at 2:22 pm #43648svoltmerParticipant
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?
March 25, 2013 at 11:27 pm #129707gilgimechParticipantIf I would do it, I would make the width 98% instead of auto.
Try that and see if it works for you.
March 26, 2013 at 1:22 am #129711DheerMemberI 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/March 26, 2013 at 12:48 pm #129778svoltmerParticipantThanks for the suggestion, but I can’t use 100% width as I have to have a 10px padding on both sides.
March 26, 2013 at 12:55 pm #129781Paulie_DMemberYou can if you use `box-sizing:border-box` can’t you?
Of course, that might break other things.
March 26, 2013 at 1:37 pm #129787svoltmerParticipantI 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 -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.