Docs

[logoglo]

Hi there, if you head on over to http://www.logoglo.com/ and scroll down to recent work, it looks great on the desktop, and mobile, but on the ipad, (portrait) the row of 6 looks really small, how do I get it to stack 3×3?

Thanks.

[Rahul]

Hi There,

Thanks for writing in! I have tested the same in iphone 6 and looks like the attached. Please confirm which device are you using and its dimensions.

Please check and confirm by providing us a screenshot of your issue. This way we will get a closer look to the issue and we can provide you tailored solutions.

Thanks again.

Cheers!

[logoglo]

Its an iPAD, not phone

[Rue Nel]

Hello There,

Thanks for updating in! I am another staff checking on this thread. To resolve this issue making the 3×3 columns on the iPad, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(max-width: 980px) and (min-width: 768px){
  .page-id-6630 #x-content-band-4 .vc_grid-item.vc_clearfix.vc_col-sm-2.vc_visible-item {
     width: 33.3%;
  }  
}

We would loved to know if this has work for you. Thank you.

[logoglo]

Perfect, thanks.

[Rad]

You’re welcome!

[logoglo]

Ok, so Im trying to cut down on the use of java, if I where to do the same layout, but using a content band with 6 columns, 2 images, what would be the css to use in order for it to act as the above?

Thanks.

[Nabeel A]

Hi again,

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 URL of a page in question or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks!

[logoglo]

Same page.

OK, I want to recreate the media grid in “recent work” without using javascript. So Im going to have a content band with 6 columns, and the images in there.

I need it to respond like we have the media grid now, so 3 columns for ipad portrait, s columns for mobile portrait, and 6 for desktop, exactly like it responds now, just using a 6 column content band.

Thanks.

[Joao]

Hi There,

Please provide your URL.

Cheers

[logoglo]

Its the same page as the rest of this post, I said above.

http://www.logoglo.com

Thanks.

[Rad]

Hi there,

I’m checking and I don’t understand. The above CSS is to make the columns into 3 (eg. 100% / 3 = 33% ) when viewed pm tablet. But even without that CSS, it’s already collapsing to 3 columns in the tablet. It’s Visual Composer’s grid which I think you can configure through its setting.

Would you mind providing your login credentials too?

Thanks.

[logoglo]

Yes, at the minute its a vc media grid, I want to re-create it as I explained above….so no vc grid, just columns and images (they images wont be clickable)

6 columns, 6 images, but I want it to respond like the above, if I make it now without any css, the columns go really small on the ipad, then portrait and mobile portrait they display 1 image per row, I want it to act like it is now, so 6 on desktop/ipad landscape.. 3 ipad portrait, then 2 on mobile.

[Rad]

Hi there,

You mean to implement it in cornerstone’s columns? If that’s the case then please add this CSS.

.x-column.x-1-6 {
width: 13.33%;
margin-right: 4%;
}
.x-column.x-1-6:last-child {
margin-right: 0;
}

@media ( max-width: 979px ) {
.x-column.x-1-6 {
width: 30.66%;
margin-right: 4%;
}
.x-column.x-1-6:nth-child(3n+0) {
margin-right: 0;
}
}

@media ( max-width: 767px ) {
.x-column.x-1-6 {
width: 48%;
margin-right: 4%;
}
.x-column.x-1-6:nth-child(2n+0) {
margin-right: 0;
}
}

Then use cornerstone’s 6 columns layout for your images.

Hope this helps.

[Author]

Posts