Hi,
New to coding and just finished up my Product Landing Page Project using one of my favorite brands for material.
Things seem to be decently solid and working on web, but on mobile everything is all out of whack. I tried using responsive images, media queries, and a couple other tips from googling around, but I can’t seem to make it work at all. Images, layout, spacing, almost nothing translates.
Thanks for the help!
My suggestion, basically start over with your CSS but this time use a narrow-first (or mobile-first if you prefer that term) approach. Narrow your browser as skinny as it will go and style the page so it looks good at that skinny width. Do not use any media queries, this will be your default CSS. Then after you have it looking good at this skinny width you can gradually start to widen your browser and add a break point when you feel you have enough horizontal room to shift the layout for a wider view port. You will use min-width for the break point and I would suggest you use em units for the value instead of px (which will make it responsive to both changes in width and text size). Repeat the widening process as needed.
As you widen you may find you need to make some changes to the default CSS or add HTML elements to help you style. This is fine but always test at the narrow view port to make sure you didn’t break anything.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.