I'm really new in coding and I created my first page ever with html and css. The thing is, I'm struggling with making the page responsive. I know that I have to add the @media query and that, but, once I add it, I don't know which parametres should I change (text, etc) and I can't see how the result would be since I'm using a computer. I would like a clear explanation or some examples because I've been looking up on Internet and I'm still very confused.

https://codepen.io/jomby/pen/NWvVNpQ

NW vVN p Q

This is the link to my page. In this case, when I see the page on the phone, the text stretches a lot and also the gallery. Maybe you could tell me how would you make this example responsive so that I can learn that way.

Thank you very much in advance, for your time and patience!

CodePudding user response：

I do not have 50 reputation to be able to leave a comment

I can't see how the result would be since I'm using a computer.

You can download Firefox developer which has a responsive tool which allows you to see the size of the screen so you can see how your website will look on different screen sizes

CodePudding user response：

The way you work with Media Queries is by:

1. Decide what to do first, mobile or desktop
2. After you do it, start by coding your webpage and once you finish you start adjusting your screensize and see what elements get misconfigured.

Here are some patterns you can follow, however you're not enclosed to configure your settings in these sizes:

@media only screen and (max-width: 1200px){
    /*Tablets [601px -> 1200px]*/
}
@media only screen and (max-width: 600px){
    /*Big smartphones [426px -> 600px]*/
}
@media only screen and (max-width: 425px){
    /*Small smartphones [325px -> 425px]*/
}