Best way to make sure CSS does not get screwed up cross platform

Probably the one thing I hate the most about making front end projects is that the second I resize a window, the things that looked good on a maximized screen are now spread out and put onto the next line because CSS does not like the new window size. How do I prevent these problems? Is there an easy way I can make sure my site is normal and similarly displayed across all screens of all sizes?

I think you mean responsive website instead of cross-platform. To make css behave as you want in different screen sizes, you could refer to any responsive web design tutorial which would help you make websites that behave as desired on any screen size.

You will need to use @media queries, and make some adjustments.

If you use a CSS framework like Bootstrap or Material, most of the work is already done for you. You run into trouble (and make more work for yourself) when you start hardcoding widths and adding margins to your outside divs that may mess up the container/row classes of your CSS framework.

Your mindset should be, everything that looks good side-by-side should also display fine stacked on top of one another, and adjust properly on a small phone screen.

1 Like

Have you tried bootstrap yet ?

Thanks for the tip,
I’ve tried to implement media queries but it seems like any CSS I change in them doesn’t actually do anything. Thoughts?

can you post your code?

Forget what I said… I guess it works now? Weird.