Mobile Screen – 2 Columns for Images

[racheldeters]

Hello!

I am working on adding images as navigation buttons for my mobile view only (http://bcurated.com/gifts-2/). However, when it is shown in mobile view it shows only 1 column of images (see screenshot(. I am looking to create 2 columns of images without any padding between them. What do you recommend I do?

Best,
Rachel

Attachments:

You must be logged in to view attached files.

[racheldeters]

Just wanted to check in and see if there was an easy way to change the columns..looking to update this today so any help would be appreciated!

Thanks!
Rachel

[David Martin – Support]

Hi Rachel,

You can setup columns to appear only on small screens, tablets, desktops or all.

With that in mind, you could set up a new set of columns and content specifically for small screens. See this screencast for the setting: http://d.pr/i/x5j0

Thanks

[racheldeters]

I already had created 2 columns for mobile only view (see setup in screenshot) but it still shifts automatically to show only 1 image vs. the 2 images I set up. For the woocommerce product view on mobile, Kyle gave me this custom CSS code (see below). Is there anyway to mimic this code to create 2 columns for mobile view but for images instead of Woocommerce products?

}
@media only screen and (max-width: 479px) {
.woocommerce .products .product {
float: left!important;
width: 50%!important;
}

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Which page is this on? Doesn’t seem to be on the link you gave me

– Kyle

[racheldeters]

Hi Kyle,

It’s on the following page. If you minimize the window far enough you’ll see that it never minimized to 2 columns but sticks to just 1.

http://bcurated.com/womens/

Thanks!
Rachel

[Kyle – SUPPORT]

Add this to your custom css:

.spb-column-container.col-sm-6 {
  width: 50%;
  float: left;
}

– Kyle

[racheldeters]

Awesome – it works!!
Thanks, Kyle.

[Kyle – SUPPORT]

No problem!

– Kyle