smitty62
asked on
Cannot center boxes on mobile, but looks good on desktop
Everything looks good on the mobile with one exception that I can't seem to correct. The rows that have 4 boxes across look good on the desktop when I shrink it as narrow as I can go, however, on my phone the boxes are not centered. They are positioned more to the right. How can I get these centered? I tried playing with the margins and padding to no avail.
http://insuranceqa.illinois.gov/TestSite3C/default.html
http://insuranceqa.illinois.gov/TestSite3C/default.html
".banner-set .banner" has "float:left". You'll want to use a media query to give it "float:none" for narrow viewports. Then you can use auto left and right margins to center them after you remove the "margin:15px" inline style you're using on them.
Put this after line 2110 in "settings.style.css".
Put this after line 2110 in "settings.style.css".
@media all and (max-width:600px) {
.banner-set .banner {
float: none;
margin: 15px auto;
}
}
ASKER
Nope, didn't work. I even tried...
and that didn't work either. Is it possible that my android is caching the page? and if that is the case, how do I get it to stop?
@media all and (max-width:600px) {
.banner-set .banner {
text-align:center;
float: right;
margin-left:10%;
margin-right:10%;
}
}
and that didn't work either. Is it possible that my android is caching the page? and if that is the case, how do I get it to stop?
Perhaps you're working from a non-minified version of the stylesheet? It didn't make a difference because you put it before the rule you want to override. You need to put it after it, like I suggested before.
ASKER
Same results.
It's still not having the desired effect because the inline style is still there. The inline style sets all 4 margins to 15px, leaving the element aligned with the direction of the text, which is left-to-right by default.
ASKER
Then why doesn't this work when I change the style to block?
@media all and (max-width:600px) {
.banner-set {
float: none;
display:block;
text-align:center;
}
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
That worked. Thank you very much!
ASKER