Hello everyone.
Hope you are all doing well. I am very excited to complete every single challenge towards the completion of my responsive web design certification. Today I have built the tribute page on Elon Musk, the CEO of Tesla and SpaceX. The codepen link is attached below:
On this project, I have only used HTML and CSS. Also, try to keep everything clear and simple. I would appreciate any suggestions or feedback on the project.
I would put a min-width in your image though so it doesn’t shrink to small when on phone.
Also a media querie for the tribute infos to take like 90% of the width on small screen or when the browser window is sized small. (Same reason as the image, so it doesn’t shrink too much. If I resize the window to a phone screen size there is literally 2-3 words per line but a lot of padding/margin left and right where the text could extend.
@Ibnulferdous There is another option here that avoids adding media queries and breakpoints for padding or margins. As your content scales down for mobile, it would be ideal for your margins and paddings to scale down as well. On desktop or tablets, padding and white space help to distinguish content and make clean layouts. Of course on mobile, all of that extra space just makes your page look empty and increases the scrolling needed by users.
Try using vw units on your padding and margins so that they scale depending the width of the viewport. There are some excellent articles on using vw, vh, and rem for fluid content design.
Thanks for the tips I was actually learning about vw and vh for making full screen sections in my product landing page but didn’t think about using them for others purposes. Will dig more into it and try to use it for the responsive margin/padding globally on the page.
