Media Queries for Sample image in Minimum Theme

Community Forums Forums Design Tips and Tricks Media Queries for Sample image in Minimum Theme

This topic is: not resolved

This topic contains 5 replies, has 2 voices, and was last updated by  cehwitham 11 months, 4 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #22580

    Chelle
    Participant
    Post count: 4

    I’m using the Minimum child theme and placed a 1600×600 image (sample.jpg) in the featured image area on the home page.  However, when the width of the browser (or device) decreases to 600px or less, the image text is difficult to read.

    I would like to replace that image at the 600px break point and possibly at 300px.  I’ve tried adding a media query with the new image at max-width 600px, but the new image does not display.  I believe it’s because the 600px image is in the background vs. foreground.

    #featured-image img .resp {
    background: url(images/sample_600.jpg) no-repeat;
    }
    I did try using z-index to pull the new image to the front, but I couldn’t get that to work either.  Any thoughts on how I can replace that featured image at different breakpoints?  I feel like I’m missing something obvious.

    Site: http://jsr.bloglex.com

    Many thanks for your help!

    #37586

    cehwitham
    Participant
    Post count: 396

    Hi Chelle,

    The link to your website doesn’t seem to be working. If you can provide a working link then I’d be happy to take a look at this for you.

    Chris


    Twitter: cehwitham Web: cehwitham.com

    #37634

    Chelle
    Participant
    Post count: 4

    Hi Chris,

    Try this one: http://jumpswimrun.com.

    Thanks,

    Chelle

    #37665

    cehwitham
    Participant
    Post count: 396

    Hi Chelle,

    This link works.

    You can’t swap an actual image for a background image using media queries.

    What you’d need to do is set the current image to display:none then set the 600px image as the background for #feature-image (you may also need to set a height on it too). However this will mean that alt text isn’t available at smaller sizes.

    Another way to do it would be to insert all 3 images as img and then only have one set to display at each media query break point.

    I hope that helps.

    Chris


    Twitter: cehwitham Web: cehwitham.com

    #37688

    Chelle
    Participant
    Post count: 4

    Thanks Chris.  At least I’m not crazy.  Thought I was missing something obvious here.

    Many thanks for taking the time to check on it:-)

    Chelle

    #37690

    cehwitham
    Participant
    Post count: 396

    No problem. It’s always handy having a second set of eyes on something like that.

    I hope you get it sorted.

    Chris


    Twitter: cehwitham Web: cehwitham.com

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.