Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Different image for 480w

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #234859
    DV1
    Participant

    On the main page at 1366w screen size I have an image in the footer box. It’s 1600×213 but it scales to the footer box’s width of 80-90%. But when screen is 480w, such as for phones, etc., then the image is too small. What I’d like to do is have a different image at 480w, say, something around 400×300.

    I’ve tried different ways to get this such as changing the img in the footer box in the 480 media query, and also tried “srcset” but things turn out squirrely. :D

    What’s the simplest coding to achieve this?

    Thanks for any suggestions.

    Dan

    #234860
    Beverleyh
    Participant

    We can’t troubleshoot something we can’t see. Can you make a reduced demo (or 2) in CodePen? Show us what you’ve tried with your media queries and srcset so we can see what “squirrely” means ;)

    #234861
    bearhead
    Participant

    I would just use a background image, and use a media query to switch it to a smaller image when the screen width is below 480px

    http://codepen.io/kvana/pen/MaZejg

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.