how do i change the pixels of my website depending on if its opened on desktop or mobile

Question

When I open my website on my mobile phone the quality changes along with things out of place. How do i configure my website to change the display of pixels when opened on desktop or mobile. I've tried asking my host's support team but I was advised to ask for help here, I am using Hostinger for my host if that helps.

Any help is appreciated

Answer 1

You can use CSS media queries:

       .box {
            width: 300px; /* Default width */
            height: 200px;
            background-color: lightblue;
            margin: 20px auto;
        }

        /* Media query for desktop */
        @media (min-width: 768px) {
            .box {
                width: 500px; /* Adjusted width for desktop */
            }
        }

        /* Media query for mobile */
        @media (max-width: 767px) {
            .box {
                width: 250px; /* Adjusted width for mobile */
            }
        }

the .box element has a width of 300px. When the viewport width is 768px or more desktop, the width of .box is changed to 500px. When the viewport width is 767px or less - mobile, the width of .box is changed to 250px