How to make multicolumn images on mobile smaller Dawn 7.0.1

1 0 0

So I need help with two things, one is how to make multicolumn images on mobile smaller and also how can I create space/padding in the image banners (Our Mission) for the sections of the website, I don't have the padding for mobile option on the theme. Please see image, I've also added the website. Thanks



The website:

Password: cakebatter

Reply 1 (1)

Shopify Expert
3398 450 503

Point 2:

1. Go to Theme->Edit code, find file name "section-image-banner.css", add this code to add padding

@media screen and (max-width: 500px) {
   .banner__content {
      padding: 18px;

This means in screen has max-width 500px (mobile screen), we'll add padding 18px for the banner

Point 1: I'm not sure if I understand it right. If you want images in the slider smaller, add this code in file name "base.css"

@media screen and (max-width: 500px) {
   .slider--mobile.grid--peek.grid--1-col-tablet-down .grid__item {
       width: calc(100% - var(--grid-mobile-horizontal-spacing) - 9rem);

If you want it to be smaller, just increase to - 10rem, - 14rem, ...

The result will be as the following image:

view - 2024-01-16T111717.816.png

Hope it helps @ellecastle 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development