Grid-view on mobile? 2 columns!

[alexanderchristiansen]

Hi Awesome Swiftideas,

I am having a two-column view on my desktop which I would like to be implemented on my mobile view.
It’s a 2×2 grid – but it doesn’t become responsive for mobile. Instead it just shows the photo on after each other.
I would like to have the view like attached.

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Are they products are just images?

Please provide a link so I can check and provide some custom css

– Kyle

[alexanderchristiansen]

Hi Kyle,
There’s two instances of this.

One being this:
http://new.organicbasics.dk/

Whereas there is four images on a row – they should be as attached 2×2 grid on mobile.

Second instance is the shop:
http://new.organicbasics.dk/shop/

Where I need a 2 column grid for all the products on mobile.

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

For the first, please add an extra class to the row so I can provide some custom css

For the shop add this to your custom css:

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

– Kyle

[alexanderchristiansen]

Kyle – you are a wizard.

Use class:
.mobile_front_row

Regards to the shop.
Seems like a good fix. However it doesn’t follow/support the spacing/padding I have been using on our site – the spacing/padding is much different on the shop page that on our lander for instance.

[Kyle – SUPPORT]

Add this to your custom css:

@media only screen and (max-width: 479px) { 
.mobile_front_row .spb_content_element.spb_text_column {
  float: left;
  padding-left: 2px;
  padding-right: 2px;
  width: 50%;
}
}

Have you got custom css that’s changed the spacing on the shop?

– Kyle

[alexanderchristiansen]

Hi Kyle,
Thanks it works perfectly on the front-page.

I haven’t made any global adjustments to the site in regards to the padding.
In general I have chosen “Full-width” on Swift Page Builder rows – and further set a horizontal padding on 2% on all ROWS.
Unfortunately this is not a “global setting”, as some of the pages is not following (or able to set this padding) this.

For instance the “Hero”-pages is not following the 2% horizontal padding on mobile – even though I set it at it.
You can see those pages here: (on mobile)
http://new.organicbasics.dk/termsconditions/
http://new.organicbasics.dk/faq/
http://new.organicbasics.dk/contact/

Further pages that is based on WooCommerce Shortcodes don’t follow the padding structure based on Row settings in Swift Page Builder. The Shop page is a good example – maybe this could be related to the css you gave me?

[Kyle – SUPPORT]

Hi

Have you set 2% padding in the row asset settings or in the CSS for the .row class?

– Kyle

[alexanderchristiansen]

In the asset-setting on every row 😉

[Kyle – SUPPORT]

Not all pages are built with the page builder that’s why you can’t add the 2% padding

– Kyle

[alexanderchristiansen]

I see.
So for instance the “Hero” pages are built with your framework and Swift Page Builder.
The padding is different as soon as you are on page with “Hero”.
http://new.organicbasics.dk/termsconditions/

[alexanderchristiansen]

Kyle, are there anything to do about above?

[Kyle – SUPPORT]

I’m not sure what you’re trying to achieve, what is wrong with this page? http://new.organicbasics.dk/termsconditions/

– Kyle

[alexanderchristiansen]

Ah ok.
I’ll try to elaborate.
If you look at this page on mobile:
http://new.organicbasics.dk/termsconditions/

And then compare it’s padding left and right to the padding on:
http://new.organicbasics.dk/

Then you can see it’s not the same padding, even though I have set the padding on termsconditions-page to 2% horizontal – just like I did on the rows of the other pages.

I would like these to have the same padding as: http://new.organicbasics.dk/

[Kyle – SUPPORT]

Add this to your custom css:

.hero-content-split #main-container {
  padding: 2%!important;
}

– Kyle