What is the proper way to make this top header ( the free shipping and account section ) stretch fullwidth whilst still being responsive?
What framework are you using?
The “col-full” parent to that top header has a max-width/center on it which is why it’s not full width. You can just remove that class. You’ll need to contain the floated shipping/account section though still (overflow:hidden / clearfix, whatever you want).
Do you mean absolutely full width - like the image?
Don’t you just need to remove the max-width of 980 on nanimate?
If put a much larger width on the col-ful it works but the .nanimate is still on 980 even if I put:
.nanimate {
max-width: 3000px;
}
@RyanReese I don’t understand the overflow: hidden but you mention, what does that control and how can I control it on local css?
@treacle0996 how do you suggest to contron this nanimate? Am I getting the code wrong?
Why the 3000px max-width? Just use none as 3000 seems like a ‘magic number’.
.col-full {
max-width: 3000px;
}
That was a float containment mechanism but you already seem to have added a ‘clearfix’ method anyway so overflow won’t be necessary (elements with overflow other than visible will automatically contain floated elements).
Ok; that’l solve your problem at THAT screen width. Now zoom out (to emulate a bigger screen). It won’t be full width now.
Follow Pauls advice. My mention to remove the class was 100% due to the fact that you didn’t need the margin:auto or the max width. Just the clearfix / some containment method.
It worked at first but now when I put:
#top .col-full {
width: none !important;
}
It doesn’t work at all and it’s showing in inspect element as crossed out being overidden by
@media only screen and (min-width: 800px)
How do I get over that?
You still have a max-width of 980px in your min-width:800px media query. Just remove it and it will stretch full width.
If you want the text in that top bar to stop at 980px max-width then you will need to add an inner element to hold the max-width:980px.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.