Docs

[highlandadventures]

Hi…can you please let me know the CSS to trigger mobile view for block grids for the items under the itinerary tab in page http://galapagos.tours/inca-trail-tours/inca-trail-experience-tour/.

I like for the right box to go under the first box on the left when the screen resolution is iphone 6 plus LANDSCAPE or smaller.

thanks

[Rupok]

Hi there,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[highlandadventures]

no a problem…i would like to set the width of the screen at which point the Block Grid feature displays like in a cell phone (one grid block on top of another vs. side by side) when view in a ipad mini landscape. please visit the page outlined in the initial request. thanks.

Basically if you make your screen smaller like an ipad mini ladscape, you will notice that the block grid in the itinerary section of the page spills into the other (the one in the left over the one on the right). I need to trigger the mobile phone view earlier to avoid this…thus the CSS request. thanks,

[Lely]

Hi There,

Please use this CSS on Appearance > Customize > Custom > CSS:

@media (max-width: 480px){
.page-id-2500 #x-section-2 .x-block-grid.two-up>li {
    width: 100%;
}
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { 
.page-id-2500 #x-section-2 .x-block-grid.two-up>li {
    width: 100%;
}
}

Hope this helps.

[highlandadventures]

tks…will this apply to all pages using the same template that uses the block grids?

[highlandadventures]

tks for the css..couple of things:

1. Needs to be for all pages not just page id 2500

2. It did not work when we added it to our css customize.

3. Like columns, tables should be vertically when certain screen size is reached.

thanks,

[highlandadventures]

see attached image…you’ll notice that blok grids flow out of the box when screen is narrow..that is why we need to trigger a cell phone view (block grids in vertical order) sooner.

[Rue Nel]

Hello There,

Thanks for the updates!

Please have the given code updated and use this instead:

@media (max-width: 480px){
  .x-block-grid.two-up>li {
    width: 100%;
  }
}

This code will apply to all your pages that has block grid with 2 columns. And since you have installed a caching plugin W3 Total Cache, please keep in mind that after doing every changes and updates, always remember to clear all caches first so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Hope this helps.

[Author]

Posts