Shopify themes, liquid, logos, and UX
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
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
If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.
B2B Solution & Custom Pricing | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024