[David DParticipant]

My page was designed for higher resolutions, so there is a lot of white space in some areas around the 1024×768 resolution due to things moving around. right up until it switches to the mobile rendering which looks great. I’d like to fill some of the white space in the medium resolutions with a few images. I know I need to use media queries, but what is the easiest way to accomplish this?
Thanks!

[David DParticipant]

I only want the images to show up when the width is between 1024 and 1153.

[David DParticipant]

Or maybe based on the resolution have different images displayed? There are probably many ways to deal with this. I think maybe this third idea is the one I would like help with.. changing the image that is displayed based on resolution. That might be the cleanest solution.

[AlexanderKeymaster]

Hi David,

Here’s a template to help you get started with CSS media queries:

/* Screen larger than 1024px */
@media (min-width:1024px) {
    
}

/* Screen smaller than 1024px */
@media (max-width:1024px) {
    
}

/* Screen larger than 980px, but smaller than 1200px */
@media (min-width:980px) and (max-width:1200px) {
    
}

You could try the visibility shortcode as well to specify alternate content depending on screen size: http://theme.co/x/demo/integrity/1/shortcodes/responsive-visibility/

[David DParticipant]

That’s actually the easy part. 🙂 How would I make a specific image ONLY show up in that third section? It’s really the setup of the image on the page that I need help with and the code to put in the media query to make that specific image (or any other specific X component) show up. That’s what I am struggling with Thank you!

[RadModerator]

Hi David,

How about this ?

@media (min-width:1024px) and (max-width:1153px) {

.my_section * {
display:none;
}
.my_section img.specific_image {
display:block!important;
}

}

This is just a sample, and much better if you could provide a url address. 🙂

Thank you.

[David DParticipant]

This reply has been marked as private.

[SupportMember]

Hi there!

Thank you for the link.

I think the problem is the background because you’re trying to align it on the images. Maybe, make another section then use the visibility shortcode for phone and add fullwidth columns for the image above and the content below or vice versa. Remove the background or create another design for middle screens.

Cheers!

[David DParticipant]

When you say “a new section” what do you mean? What is the X code terminology for “section”? I hope that isn’t a dumb question.

And is there not a way to make the different “sections” appear or disappear using the media query code you provided?

Seems the Visibility types are not granular enough for what I want. It gets back to the original question.. “Can I show or hide an X component using media queries”. I think if I had a “yes” answer to that, I could fix my issue by swapping in/out different images as the resolution changes.

Thanks so much for this amazing theme and all the help.

[David DParticipant]

And how would I remove the background using the Media Queries in the middle resolutions? That’s what you said, right?

[RadModerator]

HI David,

x-visibility works on certain size. Size between 1024px and 1153px is not a mobile sized screen. Thus you need to create custom media query.

As you can see, x-visible-phone shows the content band #2 at 767px width only.

At your case, your section is a content band/row.

I could give you a specific media query for your page, just let me know what section you want to show or hide on specific widths.

You could use Chrome browser, press CTRL SHIFT C. Then while re-sizing your browser, you can see on top of your browser the size.

Hope this helps.

[David DParticipant]

Thanks! What I am looking to do for that range of size (1024-1153) have a second image show up right under the current one to fill in the white space (one on the right, one on the left). For all the other resolutions, have it act just like it does. Thanks for the Chrome tip?

I was just hoping there was a really easy way to show or hide individual components at a very granular level based on resolution.

Thanks for all the help! Love this theme!

[ChristianModerator]

Hey David,

In that case, you’ll need to setup your own media queries. Unfortunately, since that is a bit involved, it falls beyond our scope of support. You’ll need to do it your self or hire a web developer to do the job for you.

Thank you for understanding and your kind words.

[David DParticipant]

I can figure it out. I was hoping the media queries would be easy to use with X components, but looks like I need to look at the rendered HTML and go from there. Thanks for the help.

[ChristianModerator]

You’re welcome David.

[Author]

Posts