Sidebar is pushing down my content and creating whitespace
CSS, Bootstrap 5
You'll notice I have made it so when I collapse to mobile, the Features sidebar slips under the black highlights box (where it lists engine, suspension, etc. stats). If I made the sidebar collapse to the bottom, I don't think this would be an issue but I need to to appear under the highlights box on mobile. So when the sidebar grows too long vertically, you'll notice this large white space...The DIV on the left is growing to match its neighbor, the sidebar...
https://codepen.io/valdortheshield/pen/poYNMMw
Can anyone help? I'd like that large amount of whitespace to not be there in desktop. This goes away if my sidebar is not longer than the highlights box and the image above it (not in codepen) and the highlights box. Once the Features sidebar extends beyond, I get this whitespace. It's demonstrated in the codepen.
Thanks
5 Replies
Grid would be the easiest way, but I don't know if that is easy to do in bootstrap
The quickest way without changing the current layout too much is to wrap the 2 large sections inside a container (column-8) and remove the columns from the childs. in a media query for mobile, set the display of that wrapper to contents
I adjusted your pen. (the things changed are between the added comments)
https://codepen.io/MarkBoots/pen/WNmReqz
Thank you very much! This has been confounding me....
The only drawback is there is some margin added to the sides of Features on mobile. I think this is caused by bootstrap. Bootstrap may have overcomplicated things for me. Maybe I should do this layout in pure grid...The bootstrap container, row, col classes can hide implementation and make things more complicated than they should be, I feel, for some things.
Do you have a good recommendation for a video or tutorial I should study before re-implementing this design in grid? Thanks again.
Correction: I don't think extra margin is being added to Features.
In mobile, the subcontainer'd content overruns their x margins a bit (by a few pixels)
do you not want margins on the sides when it is in a smaller view? you can just have in the @media
*{margins: 0; padding:0;}