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
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.
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
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?
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
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