[David JParticipant]

Hi guys,

I want to target a content row such that it displays different images depending on the viewport. Specifically, I want to display one image at views of 1920+px, and another at any view <1920px.

Do I put both images in the same content row and target the image by ID? Or should I make two separate rows and target the rows? Do you recommend one option over the other, or is there another option I’m missing?

What would be the custom CSS?

Thanks!

[ChristopherModerator]

Hi there,

Add a class name to target row like my-class, then add the following code in Customize -> Custom -> CSS :

@media (max-width:1919px){
.my-class{

background:url("put image path here") no-repeat top center;
}
}
@media (min-width:1920px){
.my-class{

background:url("put image path here") no-repeat top center;
}
}

Hpe it helps.

[David JParticipant]

Thanks for the reply.

I want to display responsive *images*, not the backgrounds, however. If I target the backgrounds, I get images that are not responsive (the just get cut off on the ends).

I want to insert two image elements and have one or the other display depending on the view. I cannot use the visibility shortcode because its media query pixel sizes appear to be set, so I think I’ll need to do what you suggest above using @media CSS.

Again, I need it to target the specific image elements, though, not the background. Can I do that?

Thanks!

[ChristopherModerator]

Hi there,

Sorry for the confusion, yes visibility option is not appropriate for what you’re trying to achieve, because you want to set custom screen size. Please add images and give each one of them specific class names like image-1 and image-2, then add following code :

@media (max-width:1919px){
.image-1{

display:none;
}
.image-2{

display:block;
}
}
@media (min-width:1920px){
.image-2{

display:none;
}
.image-1{

display:block;
}
}

Hope it helps.

[David JParticipant]

I did as you noted above but I’m not getting the expected result. I set each image to its own class (imagedog and imagegirl) and then used the following Customizer code:

@media (min-width: 1px) and (max-width: 768px)
{
.imagedog{display:none;}
.imagegirl{display:block;}
}

@media (min-width: 769px) and (max-width: 9999px)
{
.imagegirl{display:none;}
.imagedog{display:block;}
}

At views 768 and under, imagegirl shows, as expected. But at views over 768, BOTH images are displayed.

What am I missing?

http://www.anomaliesnetwork.net

[John EzraMember]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

@media (max-width: 767px)
{
img.x-img.imagedog{display:none;}
img.x-img.imagegirl{display:block;}
}

@media (min-width: 768px)
{
img.x-img.imagegirl{display:none;}
img.x-img.imagedog{display:block;}
}

Hope this helps – thanks!

[David JParticipant]

Darn. It displays “imagedog” up to 767px, then it displays “imagegirl” from 768px, and THEN somewhere after that (900px?) it displays BOTH images.

Is there something else in my Customizer that’s causing this? Sorry, this seems like it should be straightforward but I’m not getting the expected results.

Thanks!

[David JParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

You can add this on top of Custom > CSS in the Customizer.

/*effects on 768 and above*/
@media (max-width:  767px) {body .imagedog {display: none !important;}}

/*effects on 767 and below*/
@media (min-width:  768px) {body .imagegirl {display: none !important;}}

Note that this does not work when you add it on the bottom of the Custom CSS, there might be an syntax error somewhere on your custom css.

Can you clarify why visibility classes is not applicable on this situation?

Thanks!

[David JParticipant]

Thanks. That appears to work. I think I was also missing a curly bracket somewhere in the middle of the custom CSS, which is why it didn’t work to put the new CSS at the end.

Anyway, I want to display a different image for views above 1920px, and possibly other resolutions that don’t fit neatly into the phone/tablet/desktop parameters preset in X. That’s why I didn’t think I could use visibility classes.

[JadeModerator]

Hi David,

Thanks for clarifying. Glad it’s working now.

[Author]

Posts