[David DParticipant]

One last question on this. What are the exact resolutions for each visibility types? Desktop/Tablet/Phone?

[AlexanderKeymaster]

Hi David,

It looks something like this:

Phone: 0px – 767px
Tablet: 768px – 979px
Desktop: 979px+

The ranges are a general estimate based on popular screen sizes of devices in those categories.

[David DParticipant]

Considering that the current Desktop visibility is about 1/3 of today’s max resolution, I think it would be great to add a few more visibility types to allow people to craft their sites for all desktop resolutions. That’s my problem here.

Maybe something like:

Phone: 0px – 767px
Tablet: 768px – 979px
Desktop-sm: 980px – 1023px
Desktop-med: 1024px – 1151px
Desktop-large: 1152px – 1279px
Desktop-xl: 1280px+

[AlexanderKeymaster]

Hi David,

For now, we’re trying to keep things simple and have Phone, Tablet, Desktop. Most sites will have a “Max width” set in Customizer anyway. This will basically constrain the site’s container to not exceed an amount (usually 1200px)

You’re certainly welcome to add your own media queries to restyle elements at different sizes.

[David DParticipant]

My site is set up that exact way.. optimized for 1200 width. It’s just that area between 979px and 1200 when things automatically move around.

This kind of gets back to my original question. Is there a simple answer for this? Maybe I just didn’t answer it correctly?

Let’s say I have an image on my page:

[image src=”https://theme.co/media/x-home-main-customizer-loupe-2-comp.png”]

What would I put in the below media query to make it disappear?

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

}

And odds are, this wouldn’t work in IE, correct unless I added Javascript as well?

[ChristianModerator]

Hey David,

To hide that image in your media query, add a class to your image

[image class="your-class" src="https://theme.co/media/x-home-main-customizer-loupe-2-comp.png"]

and target it with the CSS below.

/* Screen larger than 980px, but smaller than 1200px */
@media (min-width:980px) and (max-width:1200px) {
img.your-class {
display:none
}
}

IE9 and above supports it.

Hope that helps. 🙂

[David DParticipant]

I’ll test it out, but I think this is exactly what I am looking for. In fact, this is what I was attempting to ask for in my first post. Thanks again!!

[RadModerator]

You’re very welcome David! Don’t hesitate to contact us if you have other questions.

[David DParticipant]

This reply has been marked as private.

[David DParticipant]

This reply has been marked as private.

[RadModerator]

Hi David,

I just tried that on IE11, and its working. Although I have to change it into

@media (min-width:1201px) {
img.my-class {
display:none;
}
}

So it wont negate other media query that using max-width:1200px.

Could you try that too?

Thank you.

[David DParticipant]

This reply has been marked as private.

[RadModerator]

Hi David,

That because of this

@media (min-width:980px) and (max-width:1200px) {
...
}
@media (min-width:1201px) {
...
}

Is evaluated to @media (min-width:980px) and (min-width:1201px), it will shows screen greater than 1201px , but it also say should show greater than 980px(IE followed this one). Greater than 980px and 1201px were both TRUE on desktop.

Instead, change your css into :

.my-class{
}
/* Below 1200 but higher than 1201 */
@media (min-width:1201px) and (max-width:1200px) {
img.my-class {
display:block;
}
}

Hope this helps.

[Author]

Posts