Responsive Layout

css
html
#1

I have coded a small portion of my website and I was going to see what it looked like on my phone and it was all messed up, I have looked up on how to fix this issue but I can never really figure out what they are telling me to do or the videos are like 6 years old. I was hoping someone could help me solve this issue. Thanks.

#2

For responsive sites I’d recommend Bootstrap.

The library is great.

(Sorry for not a lot of input)

#3

Most desktop browsers have a responsive/device view in their developer tools. You can change the CSS in the inspector and watch the changes live. Look up selectors and properties on reference sites like MDN or CSS Tricks.

1 Like
#4

You should consider using % or vw/vh (viewportWidth/viewportHeight) for your sizes to stay responsive, ie: width:50vw; then things will scale nicely.

Something else to look up, is adding custom CSS for specific window sizes = tweak some of the CSS depending on if it’s a mobile or desktop: using the @media