Working With Media Queries

[Max.S]

Hey there,

does PRO supports a intuitive and responsive builder so I can select a handy and say that the logo should be 50px and then select desktop and say that the logo should be 70px? Or do I have to use media queries for each?

Thanks in advance!
Max

[Prasant]

Hello @Max.S,

Thanks for asking.

You don’t need to write media query code. All the needs to be done is use Hide During Break Point under Customize tab to have device or view port specific behaviour. https://screencast.com/t/xbvvsPq89iL

Let’s say you want to display image only on desktop. To do that please add V2 image element and then fill up the width and height text box. After that scroll to Customize tab and under Hide During Break Point, click other devices icon leaving aside the Desktop and laptop icon. Doing that will display image only on desktop screens. Same login can be applied for displaying elements only on mobile devices. Here is a screencast that you can refer. https://screencast.com/t/pU05A18ugk

Thanks.

[Max.S]

Hey @Prasant,

thanks for your reply!

But when I hide it, the element is away. And I just want the logo to be smaller on mobile - do I have to hide it on mobile and create a new logo and hide this on bigger screens and resize it to the correct size? Hope you understand what I mean!

Take care,
Max

[jade]

Hi Max,

Apologies for the confusion.

You can only use the Hide During Break Point options in the section and row settings in Cornerstone.

What you want to do is doable in X by a simple media query. First, use the logo which is 70px in width so that it will be loaded 70px in desktop. Then to resize it on mobile, add this code:

@media (max-width: 480px) {
    .x-brand img {
        width: 50px;
    }
}

Hope this helps.