Html image for mobile

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Flash04jv
    Senior Member
    • Aug 2015
    • 474
    • 5.1.x

    Html image for mobile

    I am using a simple img src html for images. Looks good on PC, but scrunched on mobile.

    What can I do so the image adapts for mobile? Do I need to add a specific style? I have it sized by px now.
  • In Omnibus
    Senior Member
    • Apr 2010
    • 2310

    #2
    Using media queries is one option. Assign your HTML a unique ID or class and use the appropriate CSS.


    /* Extra small devices (phones, 600px and down) */
    media only screen and (max-width: 600px) {...}

    /* Small devices (portrait tablets and large phones, 600px and up) */
    media only screen and (min-width: 600px) {...}

    /* Medium devices (landscape tablets, 768px and up) */
    media only screen and (min-width: 768px) {...}

    /* Large devices (laptops/desktops, 992px and up) */
    media only screen and (min-width: 992px) {...}

    /* Extra large devices (large laptops and desktops, 1200px and up) */
    media only screen and (min-width: 1200px) {...}

    Comment

    widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
    Working...