[ansonofficialParticipant]

Hi Support,

http://brothersbassin.com/

I was wondering if I can customize responsive visibility between laptop and extra large displays. The reason why I want to do this is because actually most laptop displays are around 1280px (like my mac I am writing to you on) instead of 1199px.

Previously I asked this question and got the following code:

@media (min-width: 1200px){

.cs-hide-xl{display:block !important}
}
@media (min-width: 980px) and (max-width: 1199px){
.cs-hide-lg{display:block !important}

}

@media (min-width: 1281px){

.cs-hide-xl{display:none !important}
}
@media (min-width: 980px) and (max-width: 1280px){
.cs-hide-lg{display:none !important}

}

but now since my site max width is 1500px, it seems the code doesn’t work and now shows laptop display only when I zoom into the browser to 110%. How do I fix this

Thanks so much!

Anson

[ansonofficialParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Thanks for writing in! Instead of editing those default visibility classes, please define this on your custom CSS.

/*hide element on 980px to 1280px screen*/
@media (min-width:  980px) and (max-width: 1280px) {
	.cs-hide-laptop {display: none;}
}

/*hide element on big screen*/
@media (min-width:  1281px) {
	.cs-hide-bigscreen {display: none;}
}

Then use the class cs-hide-laptop to hide elements on screen 980px to 1280px. And use the class cs-hide-bigscreen to hide elements on screen 1281px and above.

Hope it helps, Cheers!

[ansonofficialParticipant]

Hi again,

It’s still not working properly. Using google chrome, when I keep the browser zoom setting at 100% it displays the large display slider and then when I zoom to 110% then I see the laptop display.

Please help

Anson

[FriechModerator]

Hi There,

When you zoom in the browser it actually reduce browser width (try zooming 150% and you will see the mobile menu).

You can use the Developer Tool (F12 then ctrl + shift + m ) instead to preview your page on different screen width.

Since you have the custom visibility classes, make sure you disable the visibility class option of Cornerstone.

Thanks.

[ansonofficialParticipant]

Hi there,

I am well aware that when you zoom in it reduces the browser size. I am using a Macbook Pro 1280 x 800 laptop. Like my other sites I’ve built, it should show at 100% regular size browser the laptop display elements I have created for a page because I am viewing it on a laptop. Instead, it shows at 100%, regardless of browser, the large display elements and only begins to show me laptop display when I go to 110% zoom.

I know about the developer tool, but it’s not accurate currently to what I see in real life aka my laptop which meets those dimensions.

I tried removing the visibility options in cornerstone that i set and use the the new custom classes, but I saw no change in what I saw on my screen.

Hope this clarifies a bit,

Anson

[JoaoModerator]

Hi Anson,

I can you point on which element you have tested the code above provided?

I have streched your website to 3200px and it looks good

Please inform us which element you are trying to change on xl screens so I can test it here.

Please see img attached of your website at 3200px width.

Let us know more details

Thanks

Joao

[ansonofficialParticipant]

Hi again,

I tested it out on this page
http://brothersbassin.com/film

I am having issues with this page and revolution sliders responsiveness. So to fix that, I want to make sliders for laptop and large display, but in order to do this, the elements need to be shown properly in the right screen dimensions.

Thanks,

Anson

[RadModerator]

Hi there,

1. Please don’t base your design and optimization on browser zoom. Not all browser has that, and if you do that it may then mess the proper styling on a non-zoomed design. Zoom is non-standard, it’s not recommended.

2. Responsive breakpoints aren’t based on layout max width, it’s based on screen width.

3. There are many kinds of laptop, there are too large, large, medium, and small. There could be many screen resolutions out there. If you’ll going to optimize it for your laptop, then it may not look okay on major laptops.

Rev. Slider is already responsive, you can even create the custom grid to match your laptop and devices, you can re-arrange them. It’s just about configuration 🙂

Now, please provide a mockup screenshot of how should it appear on your target devices. I like to compare them to what I currently getting since I have a different screen.

Thanks!

[Author]

Posts