Help with CSS Responsive layout

[Nik schaad]

Okay so im making a website, and i like to see what I'm doing, and that's pretty easy when developing for 1920x1080 but not when you want to make it responsive to for example mobile devices, because then i cant see what the fuck I'm doing. Can anybody give me some tips on how to see what I'm doing? because when i do it in the device toolbar of chrome it looks good in the resolutions i make but when my users visit the sites it looks different, and yes i upload the right things to public.html

I'd appreciate it if someone could tell me how i can see what I'm doing, Thanks in advance!

My current code:

#gay-pic-1 {
    position: absolute;
    bottom: 500px;
    left: 1200px;
}
button:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  }
#gay-pic-2 {
    position: absolute;
    top: 1400px;
    left: 1200px;
}

#full-size {
    height: 100%;
    width: 100%;
}
#navigation-p {
    top: 1600px;
    left: 850px;
}
.buttons-text {
    position: absolute;
    font-size: 20px;
    font-weight: 400px;
}
#button-1 {
    top: 1660px;
}
#button-2 {
    top: 1735px;
}
#button-3 {
    top: 1810px;
}
.buttons {
    position: absolute;
    background: linear-gradient(to right, #dc47e4, #06c49b);
    height: 30px;
    left: 736px;
    width: 150px;
}
.block-1 {
    background: linear-gradient(90deg, #73eee4, #dc47e4);
    padding: 10px;
    position: relative;
    width: 1200px;
    height: 1900px;
    top: 40px;
    left: 320px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
#social-btn-1 {
    background: linear-gradient(to right, #fc466b, #3f5efb);
    top: 1850px;
}
#social-btn-2 {
    top: 1775px;
}
#social-btn-3 { 
    top: 1700px;
}
.social {
    background: linear-gradient(to right, #fc466b, #3f5efb);
    position: absolute;
    left: 825px;
}
html {
    align-items: center;
}

body {
    background: linear-gradient(to right, #890000, #D69901, #BABA0D, #2EAA03, #047A97, #350497, #8C0497);
}
* {
    text-align: center;
}
.gay-header {
    position: absolute;
    top: 64px;
    left: 850px;
    font-size: 40px;
}

#paragraph-1 {
    position: absolute;
    bottom: 750px;
    left: 380px;
}

#paragraph-2 {
    position: absolute;
    bottom: 675px;
    left: 380px;
    max-width: 750px;
}

#paragraph-3 {
    position: absolute;
    bottom: 500px;
    left: 380px;
    max-width: 750px;
}

#paragraph-4 {
    position: absolute;
    top: 500px;
    max-width: 750px;
    left: 380px;
}

#sexualization {
    position: absolute;
    top: 800px;
    left: 850px;
    font-size: 40px;
}

#paragraph-5 {
    position: absolute;
    top: 900px;
    max-width: 750px;
    left: 380px;
}

#paragraph-6 {
    position: absolute;
    top: 950px;
    max-width: 750px;
    left: 380px;
}

#paragraph-7 {
    position: absolute;
    top: 1000px;
    max-width: 750px;
    left: 380px;
}

/**Might have to increase the height between P-7 and p-8 depending on the google ads snippet**/
#paragraph-8 {
    position: absolute;
    top: 1250px;
    max-width: 750px;
    left: 380px;
}

#paragraph-9 {
    position: absolute;
    top: 1350px;
    max-width: 750px;
    left: 380px;
}

#paragraph-10 {
    position: absolute;
    top: 1400px;
    max-width: 750px;
    left: 380px;
}

#paragraph-11 {
    position: absolute;
    top: 1850px;
    max-width: 750px;
    left: 380px;
}

@media only screen and (max-device-width: 720px) and (max-device-height: 1560px) {
    #navigation-p {
        top: 3600px;
        left: 255px;
        font-weight: 1000;
    }
    .paragraphs-720x1560 {
        font-size: 26px;
        font-weight: 400;
        left: 120px;
        max-width: 500px;
        position: absolute;
    }
    .block-1 {
        left: 25px;
        max-width: 640px;
        height: 4100px;
    }
    .gay-header {
        top: 64px;
        left: 325px;
    }
    #gay-pic-1 {
        top: 350px;
        width: 600px;
        max-height: 150px;
        left: 75px;

    }
    #paragraph-1 {
        font-size: 26px;
        top: 175px;
        left: 120px;
        max-width: 500px;
        font-weight: 400;
    }
    #paragraph-2 {
        top: 500px;
        font-size: 26px;
        left: 120px;
        max-width: 500px;
    }
    #paragraph-3 {
        top: 750px;
        left: 120px;
        font-size: 26px;
        font-weight: 400;
    }
    #paragraph-4 {
        font-size: 26px;
        font-weight: 400;
        top: 1200px;
        left: 120px;
    }
    #gay-pic-2 {
        top: 1775px;
        left: 90px;
        max-height: 150px;
        width: 600px;
    }
    #sexualization {
        top: 1900px;
        left: 300px;
    }
    #paragraph-5 {
        font-size: 26px;
        font-weight: 400;
        top: 2000px;
        left: 120px;
        max-width: 500px;
    }
    #paragraph-6 {
        top: 2130px;
        left: 120px;
    }
    #paragraph-7 {
        top: 2260px;
        left: 120px;
    }
    #paragraph-8 {
        top: 2600px;
        left: 120px;
    }
    #paragraph-9 {
        top: 2700px;
        left: 120px;
    }
    #paragraph-10 {
        top: 2815px;
        left: 120px;
        max-width: 500px;
    }
    #paragraph-11 {
        top: 4000px;
        left: 120px;
        max-width: 500px;
    }
    #button-1 {
        top: 3650px;
        left: 275px;
    }
    #social-btn-1 {
        top: 3700px;
        left: 350px;
    }
    #button-2 {
        top: 3745px;
        left: 275px;
    }
    #social-btn-2 {
        top: 3795px;
        left: 350px;
    }
    #button-3 {
        top: 3840px;
        left: 275px;
    }
    #social-btn-3 {
        top: 3890px;
        left: 350px;
    }
}
@media only screen and (max-device-width: 393px) and (max-device-height: 851px) {
    .block-1 {
        width: 300px;
        height: 3800px;
    }
    .gay-header {
        top: 64px;
        left: 165px;
    }
    #paragraph-1 {
        font-size: 18px;
        font-weight: 400;
        top: 150px;
        left: 50px;
        max-width: 300px;
    }
    #gay-pic-1 {
        max-height: 100px;
        width: 300px;
        left: 45px;
        top: 285px;
    }
    #paragraph-2 {
        font-size: 18px;
        font-weight: 400;
        max-width: 300px;
        left: 50px;
        top: 375px;
    }
    #paragraph-3 {
        font-size: 18px;
        font-weight: 400;
        max-width: 300px;
        left: 50px;
        top: 555px;
    }
    #paragraph-4 {
        font-size: 18px;
        font-weight: 400;
        max-width: 300px;
        left: 50px;
        top: 975px;
    }
    #gay-pic-2 {
        max-height: 100px;
        width: 300px;
        left: 45px;
        top: 1525px;
    }
    #sexualization {
        top: 1700px;
        left: 84px;
    }
    #paragraph-5  {
        font-size: 18px;
        font-weight: 400;
        max-width: 300px;
        left: 50px;
        top: 1800px;
    }
    #paragraph-6 {
        font-size: 18px;
        font-weight: 400;
        max-width: 300px;
        left: 50px;
        top: 1890px;
    }
    #paragraph-7 {
        font-size: 18px;
        font-weight: 400;
        max-width: 300px;
        left: 50px;
        top: 2020px;
    }
    #paragraph-8 {
        font-size: 18px;
        font-weight: 400;
        max-width: 300px;
        left: 50px;
        top: 2400px;
    }
    #paragraph-9 {
        font-size: 18px;
        font-weight: 400;
        max-width: 300px;
        left: 50px;
        top: 2500px;
    }
    #paragraph-10 {
        font-size: 18px;
        font-weight: 400;
        max-width: 300px;
        left: 50px;
        top: 2600px;
    }
    #navigation-p {
        top: 3300px;
        left: 150px;
    }
    #button-1 {
        top: 3400px;
        left: 100px;
    }
    #social-btn-1 {
        top: 3445px;
        left: 150px;
    }
    #button-2 {
        top: 3495px;
        left: 100px;
    }
    #social-btn-2 {
        top: 3540px;
        left: 150px;
    }
    #button-3 {
        top: 3590px;
        left: 100px;
    }
    #social-btn-3 {
        top: 3630px;
        left: 150px;
    }
    #paragraph-11 {
        max-width: 300px;
        left: 65px;
        top: 3700px;
    }
}

 

[riklaunim]

You should avoid using fixed sizes for your layout structure. And without HTML it's hard to tell what is the problem in your design. Looking at the CSS - you have way to much of fixed sizes and fixed positioning - this is really bad and it will never scale properly.

[popeldd]

Since I do not know your html, I could tell you that your css looks extremely specific in terms of displays, positioning, and height/width.

I havent done CSS in a little bit. But no worries, I've got a useless certification in it lol.

I find it fun learning hands on, so I would highly recommend you play around with the following:

1. Make sure you know your CSS Grid Layout
2. Understand the different display values
3. Understand the different position values (Absolute positioning is absolute, meaning it will stay where it is defined. Relative is relative to other items around it, depending on the display values (there are other positions, but these are the starting two))
4. you can use percentages(%) instead of pixels(px) for height/width (not always useful, but it may come in handy)
5. after knowing the css grid layout, try changing display to flex (but if you are confused in any way about other things I've said, just forget this bullet point, you'll eventually come across it)

I may be a bit confusing, but w3schools and other documentation sites are really helpful.

[bowrilla]

"Ctrl + Shift + I" and then "Ctrl + Shift + M" ... welcome to Chrome's (and Firefox's) dev tools to simulate other resolutions, devices and aspect ratios.