Web design responsiveness
Hello everyone, just want to ask for help regarding the responsiveness of my practice project(website portfolio). The issue is that when I view it on Google like in the live server, it does look good, however, if I shrink the browser tab it doesn't look good. When I shrink it on Google inspect elements it shows like this:
I will share the codepen link here and some screenshots.
Codepen link: https://codepen.io/Atleastre14/pen/yyByWmb
Please check the code, if you have spare time. Thank you very much in advance!! :))))))
7 Replies
Also, is it advisable to start from scratch? Can the whole document be fixed?
The biggest issue I see is you are trying to align things with padding and margin. These are hardcoded values and quite large so they are causing overflow when you are hitting them.
#learnGrid 😄
So basically all I did was remove all the margin/padding left/right. Added flex-wrap: to your hero and .posts but you will want to set a min/max width for them or use flex-wrap in a media query.
Then I set a max-width: on all your sections and added margin auto to center with some padding.
Let me know if you have questions
Also I highly recommend you take this course (its free) https://courses.kevinpowell.co/conquering-responsive-layouts
Kevin Powell
Conquering Responsive Layouts
Are you ready to take the challenge and finally figure out responsive layouts? Click the button below and jump in!
Kevin is upgrading it to include more grid and modern CSS but its still very much a valid course to break you in.
Please make sure you fork my pen asap as I will nuke it after awhile.
Thank you very much for the information and for the help. This really means a lot to me!! :))))