Change website design for mobile devices or browser resize

Question

Im sorry if this has been asked before im sure somewhere there must be an answer for this but for some or other reason I cant find it, probably using wrong search query

Answer 1

I usually do this in my projects. I prepare content by default but its set to display: none, when media query detects the mobile device width it will render appropriate content for the device.

with CSS Media Query

HTML

CSS

  /* if desktop */
    .mobile_device_380px {
        display: none;
    }
    .mobile_device_480px {
        display: none;
    }


    /* if mobile device max width 380px */
    @media only screen and (max-device-width: 380px) {
        .mobile_device_380px{display: block;}       
        .desktop {display: none;}
    } 

    /* if mobile device max width 480px */
    @media only screen and (max-device-width: 480px) {
       .mobile_device_480px{display: block;}
       .desktop {display: none;}
    }

Take note your page might take long to load. just limit what you need to change and be specific.