How to make multicolumn images on mobile smaller Dawn 7.0.1

[ellecastle]

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: https://sweet-ella-theme.myshopify.com/?_ab=0&_fd=0&_sc=1

Password: cakebatter

[BSS-Commerce]

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:

Hope it helps @ellecastle