Search code examples
javascripthtmlcsswidthresponsive

Change the width of a div depending on the device

I would like to use css to add an effect so that a div has a width of 500px but only if the user is on a computer. If the user is on a mobile phone, tablet, iPad etc, it would have the predefined width. How would I accomplish this?

Solution

  • You are looking for media query, read more about it here. If you are curious knowing different view widths, you can refer to this:-

    1. 320px — 480px: Mobile devices
    2. 481px — 768px: iPads, Tablets
    3. 769px — 1024px: Small screens, laptops
    4. 1025px — 1200px: Desktops, large screens
    5. 1201px and more —  Extra large screens, TV

    OR

    You can use responsive units to set widths, like 100% or 100vw, know more about responsive units here.