Alignment issue: Extra space on the left and right side of a horizontal list when stacked.
https://codepen.io/Mcoding-300/pen/NPWKJMK this preview may show the list vertically but it actually looks horizontal in browsers
I placed a border around a list of (what will be icons when I'm done getting alignment right) to observe how much space the list may have on the left and right sides of itself
1) How do I get this list to stack without the extra space on the left side so that it lines up with the items above it when the screen is reduced for smaller screen sizes?
I've used a media query. I’ve also tried removing all padding and margins from the left of it by setting to 0 as you can see in my code.
2) When my screen is reduced horizontally for smaller screens, I can tell there's a lot of space on the right side of my paragraph. How do I get rid of that?
(I realize part of it might come from space around the list on the right side but I'm not sure how to get rid of that either.
I've tried removing all padding and margins from the right of it by setting to 0 as you can see also).
If you need more info, this is the site I was attempting to emulate and in particular the bottom of its footer https://www2.hm.com/en_us/index.html
It is the footer of the H&M site I shot for, for practicing creating footers (I know everything that I wrote is in the main section. I just didn't know if going straight to the footer without having content in main would have caused any problems later, so I practiced everything in the main).
I tried this to help me learn to create this kind of layout with flexbox and grid + practice with fb and grid in general
6 Replies
You have set it to
justify-content: start in your media query for smaller viewports but you are then overwriting this further down the in the code with justify-content: center;
Basically you need to define your media query at the end of the code or at least after the “default” definitions for the element.@Chris that worked for the extra space on the left side! Really appreciate it!
The only thing I’m wondering now is how to deal with the extra space on the right side of the inside of the container 🤔 because I want the paragraph to look centered in the viewport for smaller screens like as if it has the same margin on the right that is on the left side (pretty small)
remove the
max-width: 89%; and leave the padding to the parent containerIf I remove the max-width of the paragraph, then there is no space between the paragraph and the icons in the full-screen version. The paragraph has its max-width changed to 100% for small screens though. Small screen version is when I’m seeing the extra space on the right
You are using grid on the parent so just a gap.
The paragraph has its max-width changed to 100% for small screens though.Again, you have defined the max-width 100% in the media query before the max-width: 96% so it is getting overwritten I have created a quick fork (copy) of your pen and simplified the CSS for you to take a look. More could be done but hopefully you will be able to see that you have over-complicated things for yourself and defined somethings that you don't need to. https://codepen.io/cbolson/pen/LEYPwzq
I really appreciate it. I’m going to take a look
OK, I read over the simplified code and thought about it and implemented those changes. It does look simpler and it works out the way I wanted it to look. This was helpful and helped me in my learning. I haven’t had much practice with these things. Thank you so much 🙂