How to write CSS styles that will look good on mobile devices as well as PC. I have tried using bootstrap which is achieving the styles that I need. Even though with pure CSS how to do the same.
For instance the below class when applied looks good on a PC but when the same is viewed in mobile it doesn’t.
Do some research into media queries and break points. Using this method allows you to have different styles for different screen sizes (mostly layout / sizing, although you can apply it to any style).
Media queries will do it, but:
- here, you’ve said the total horizontal size is 1050px. If all your other widths are similarly sized in px, you’ll basically have to write the site styles again inside media queries for mobile. And maybe again for other sizes (landscape mobile? Tablet? Bigger tablet? Etc)
- setting width in px in CSS is normally a mistake, as you’re styling for a specific width, when in fact you have no control over the width a user views the page at.
- normally, use % for width of main page elements.
- media queries just to fix bits that break at different sizes, ideally should basically work at all sizes without queries.
To add to what has already been said, a good trick is to start small, i.e. design for mobile first, then add media queries to reorganise for tablets and desktops. It’s a lot easier than to design for desktop and then try to make everything fit nicely into a mobile screen.
I always do desktop first.
I always regret doing desktop first!