Setting box/item width desktop vs. mobile

Store Design
, , ,
1

Hello everyone,

I have an annoying problem. The website I’m building requires a lot of gallery images with text. However, it seems the theme we’ve selected doesn’t offer a lot of customization for galleries or I’m missing something. I’m using their “banner” sections and adding the image with text below. On the right side there is “box settings” and “width” box. I’ve entered 33% which looks great on desktop, but terrible on mobile. Vice versa, entering 100% looks terrible on desktop but perfect on mobile.

Am I missing something simple with the width settings in the theme customizer? If not, is there a piece of code I can add for this page that will set these items at 33% for desktop and 100% for mobile?

Page: https://rockstoc.com/pages/press

Thank you in advance!

2

@Seann_1

Hi,

To fix the layout, please go to Assets > site.scss.css file and add the code below.

@media screen and (min-width: 768px) {
  .col-banner, .col-banner.banner-1, .col-banner.banner-2, .col-banner.banner-3, .col-banner.banner-4, .col-banner.banner-5, .col-banner.banner-6 {
  width: 33% !important;
  padding: 24px;
  }
  #shopify-section-template--14556704505969__3c33cd39-5f70-4f46-af0c-586918ef80c1 .bwp-widget-banner .col-banner.banner-1,
  #shopify-section-template--14556704505969__3c33cd39-5f70-4f46-af0c-586918ef80c1 .bwp-widget-banner .col-banner.banner-2,
  #shopify-section-template--14556704505969__3c33cd39-5f70-4f46-af0c-586918ef80c1 .bwp-widget-banner .col-banner.banner-3,
  #shopify-section-template--14556704505969__3c33cd39-5f70-4f46-af0c-586918ef80c1 .bwp-widget-banner .col-banner.banner-4,
  #shopify-section-template--14556704505969__3c33cd39-5f70-4f46-af0c-586918ef80c1 .bwp-widget-banner .col-banner.banner-5,
  #shopify-section-template--14556704505969__3c33cd39-5f70-4f46-af0c-586918ef80c1 .bwp-widget-banner .col-banner.banner-6  {
    max-width: 100% !important;
    flex: 1 0 auto !important;
    padding: 0 12px !important;
  }
}
@media screen and (max-width: 767px) {
  .col-banner, .col-banner.banner-1, .col-banner.banner-2, .col-banner.banner-3, .col-banner.banner-4, .col-banner.banner-5, .col-banner.banner-6 {
  width: 100% !important;
  padding: 12px;
  }
  #shopify-section-template--14556704505969__3c33cd39-5f70-4f46-af0c-586918ef80c1 .bwp-widget-banner .col-banner.banner-1,
  #shopify-section-template--14556704505969__3c33cd39-5f70-4f46-af0c-586918ef80c1 .bwp-widget-banner .col-banner.banner-2,
  #shopify-section-template--14556704505969__3c33cd39-5f70-4f46-af0c-586918ef80c1 .bwp-widget-banner .col-banner.banner-3,
  #shopify-section-template--14556704505969__3c33cd39-5f70-4f46-af0c-586918ef80c1 .bwp-widget-banner .col-banner.banner-4,
  #shopify-section-template--14556704505969__3c33cd39-5f70-4f46-af0c-586918ef80c1 .bwp-widget-banner .col-banner.banner-5,
  #shopify-section-template--14556704505969__3c33cd39-5f70-4f46-af0c-586918ef80c1 .bwp-widget-banner .col-banner.banner-6  {
    max-width: 100% !important;
    flex: 1 0 auto !important;
    padding: 0 12px !important;
  }
}

Hope it helps.

Thanks.

1 Like
3

@DavidEKim Thank you so much! That worked!