To be honest, my main recurring issue is the white space… every time I get on the second section the white space appears and another issue is centering. When I resize the browser there always seems to be more space on the right. I don’t want to use overflow x hidden all the time but anyway someone please critique and help me improve! Roast me, toast me its fine as long as you aren’t too condescending. :B Thank you, thank you!! You can critique the design too lol.
https://niadani.github.io/MPD/
https://codepen.io/lilliongoddess/pen/xxEmXVY
1 Like
I suggest you run your HTML through the W3C validator, as you have a few errors there.
Your CSS is valid, though, so congratulations on that. 
I would suggest removing the cigarette image from the second section at smaller screen widths. At very narrow views, the text is slightly cut off on the right, and removing the image solves the problem and makes it more comfortable to read.
There is insufficient contrast between the colour of your text and the colour of your background(s) to meet accessibility requirements. https://webaim.org/resources/contrastchecker/
2 Likes
What space are you talking about exactly?
You have a min-height:100% on the first main element giving the initial section a full viewport height which results in vertical space at the bottom depending on viewport height, but I assume you did that on purpose?
I don’t see any extra vertical space on the second section apart from the 120px top and bottom padding you applied. Where are you seeing ‘extra space’?
Can you be specific? the only space on the right I see is the 20px padding you put on .brow.
Apart from that 20px it all looks centred to me. I would put 10px left and right padding on .brow to even it up instead of the 20px right padding only.
2 Likes
tHANK YOU techno bear :)!! Accessibility is no fun, but I’ll keep that in mind for sure though.
1 Like
Exactly! The purchase bundles section is what i was talking about, sorry.
Which space are you trying to remove on the purchase bundles.
You have 90px padding top on .bundles but I assume that’s what you wanted?
I can’t see any extra space as such apart from the 20px padding I mentioned in my previous post.
It’s probably obvious to you as you are familiar with your own design but I need more specific details about where this space is located and how you would like it to look. There is space at the side of course but that would seem to be the design required.
Sorry to sound thick 
1 Like
No worries, the right side. it looks like there’s more space on the right on mobile.
I notice here you have cut the content right off.
That’s why hiding overflow by default is bad practice especially on the html and body elements. You need to make that content fit and you can do that by aligning it under the image instead of at the side.
e.g. add flex-direction:column and margin:auto on the image.
You also have some fixed width items such as your bookcover at 394px width which is much too wide for most mobiles and will push the viewport wide (but not the other page content) and increase the space at the right side of the screen where it overflows. You also have a button at 308px which is inside other elements that have padding and margins etc and these will also make it a squeeze for the iphone5.
Avoid fixed widths at all costs or make sure that in the media queries you change them before they breach the layout. Make sure you even out your padding as I mentioned twice before and don’t just have it on one side.
Remove the overflow:hidden on the html/body elements and then you can check easily if you have a horizontal scroll at various widths (open and close your browser window). Wherever you see a scroll bar pop up then inspect with the webdev inspector and tweak it until the scrollbar goes away. Do this for the whole range from 320px up to large screen.
Once you’ve done all those things we can review and see if there are other issues to solve.
A horizontal scrollbar is your usually the first indication that something is wrong when making responsive sites so don’t hide it by default. The only time you need to hide overflow is when you hide it on purpose for a known reason or effect.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.