Skip tablet view

Support
#1

Hi,

I don’t really like the ‘tablet/ipad’ view on some pages. Is it possible that the design will skip the tablet view and goes straight to mobile view?

Is there a setting for this?

#2

Hi djinnie,

There is no such a setting. But you can use the Hide During Breakpoint feature to hide some sections in the tablet view and add other section which will work ok in tablet and you will show them only on tablet view.

Please read the article below for more information:

Thank you,

#3

Hi,

Hiding a section is not what I am trying to do here because I need that section.

Here you can see the tablet view (and this is the view I don’t like):

It should go straight to this:

#4

Hi There,

Please try adding this custom CSS under Theme Options > CSS:

@media (max-width: 768px){
    .x-global-block-8444 .x-2-3,
    .x-global-block-8444 .x-1-3 {
        width: 100%;
        margin: 0
    }
}

Hope it helps :slight_smile:

#5

Hi,

That does not do anything … Does not help. Still the same.

#6

Hi @djinnie,

Adding the CSS outside that works, which means you have existing CSS that affects that one.

You have this CSS without proper closing.

@media (max-width:360px){

And that’s what affects the new @media block. I’m not really sure where you should put the closing bracket as I’m not sure which CSS is meant for 360px.

But in your screenshot, it should be like this if the entire CSS is covered by 360px @media block.

}
} /* the missing close bracket */

@media (max-width: 768px){
    .x-global-block-8444 .x-2-3,
    .x-global-block-8444 .x-1-3 {
        width: 100%;
        margin: 0
    }
}

Thanks!

#7

I have added the missing closing bracket but still not difference.

#8

Hi,

Try to adjust the width in the css code.

eg.

@media (max-width: 1200px){
    .x-global-block-8444 .x-2-3,
    .x-global-block-8444 .x-1-3 {
        width: 100%;
        margin: 0
    }
}

You may change 1200px for when you would like your columns to switch to full width

Hope that helps.

#9

That works! Thanks!

How can I now add more global blocks to that css code?

#10

Hi There @djinnie

First you need to get the global block IDs by inspecting your page within the browser. Check more information from here (https://www.lifewire.com/get-inspect-element-tool-for-browser-756549).

Then once you get the IDs, you can append global block IDs to the above CSS rule by separating with a comma.

Example:

@media (max-width: 1200px){
    .x-global-block-xxxx .x-2-3,
    .x-global-block-xxxx .x-1-3,
    .x-global-block-8444 .x-2-3,
    .x-global-block-8444 .x-1-3 {
        width: 100%;
        margin: 0
    }
}

Hope that helps.

#11

It does not work for the other global blocks…

#12

Hi,

I checked your page and I didn’t see a global block with those class.

x-global-block-8530
x-global-block-1903
x-global-block-8444

The one existing on the page are 8524,9303,8535,8540,8551,8687,8955

Please make sure you have added the correct ids.

If you want all global blocks to behave that way, you can change the code to this.

eg.

@media (max-width: 1200px){
    .x-global-block .x-column {
        width: 100% !important;
        margin: 0 !important;
    }
}

Hope that helps

#13

That works great! Thanks.

#14

You’re welcome.

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.