i have issues making my page responsive. At some widths my page’s responsiveness is perfect then, a bit lesser or more it is a bit scattered. How do i make all the widths perfect.
Any help will be appreciated. i have struggled with this since i started building my portfolio page, thought i could figure it out on my own with Devtools but i am not able to
If you dont show the code you write is difficult to help you
In addition to seeing your project so we can help you, I would recommend you use a narrow-first approach (or mobile-first if you prefer that term). Narrow your browser as far in as it will go and style the page so it looks good at that narrow width. Do not use any media queries! This will be your default CSS.
Then, after you have it looking good at the narrow width you can begin widening the browser and adding media queries to help you rearrange things when you have enough horizontal room. Your media queries will use min-width instead of max-width and I would recommend you use em units instead of px. You may need to add helper divs and such to create wide layouts. That’s fine, but always narrow your browser again to make sure you didn’t break anything in the narrow view.
Hey Paolo,
i will do that as soon as i move it to codepen. i am still working on it in my Vscode
hey bbsmooth,
this will be so helpful. i normally style it when the screen is at fullwidth and then use media queries with max-width to make it responsive and it has been making my life very difficult. i will try this approach and give a feedback
thank you.
see below my code on codepen
My images are not of the same height even as the dimensions are the same. i am guessing it is because of the flex-basis. Also, i am still struggling with making it responsive on different widths. is there any recommendations on certain widths to use for media queries?
My images are not of the same height even as the dimensions are the same. i am guessing it is because of the flex-basis. Also, i am still struggling with making it responsive on different widths. is there any recommendations on certain widths to use for media queries?
Can you be more specific about where you are struggling? Except for the image height problem, I’m not seeing any obvious issues.
I never use specific px widths for media queries so I’ll let someone else answer that. I’m sure if you use the googles you’ll find a ton of recommendations.
I always use em units for media queries. I let the content tell me how much room it needs, not some arbitrary px values 
Choose breakpoints based on the content
It’s so nice knowing that my layout will always work on any device no matter what the viewport width or font size the user is using.
It’s because your images don’t have the same ratio for their dimensions. So you can either fix the images or you can force the height to be the same by setting height: 100%.
this is just my challenge now, knowing my layout can work on any design. do you make use of the devtools to figure out the elements that are not responding as you wish?
i will also try the em units and see how it will turn out
i am able to fix the height. thank you
Yes, use the dev tools responsive design mode to narrow your page down to 320px, which is the minimum you need to check to be completely accessible.
that is how i started and it helped a lot. do you use just em or rem for the media queries?
There is no difference when it comes to media queries. I use em because it’s one less character to type.
thank you. please can you give a review on my portfolio and give me a feedback
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.