Debut theme - changing number of images per row on home page

[cossetspace]

Hi Everyone,

I’m trying to make my mobile site to look the same as my desktop site. It seems like the theme is being modified because of the smaller screen size. If use my mobile in landscape mode it works perfectly. For example below

Desktop

Mobile:

I have tried a few things including following the instructions here https://community.shopify.com/c/Technical-Q-A/How-to-Display-Homepage-quot-Text-columns-with-images-quot-in-3/m-p/918920#M36770 but they didn’t help.

Site name is www.cossetspace.com.au

[Kinjaldavra]

hello @cossetspace

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (max-width: 749px){     
#shopify-section-1621306027f9e92747 .grid{
    display: flex;
    flex-wrap: nowrap;
}
#shopify-section-1621306027f9e92747 .grid .grid__item {
  flex: 0 0 33.33%;
}
 #shopify-section-1621306027f9e92747 .image-bar__content.image-bar__overlay .image-bar__text .image-bar__caption{
        padding: 0 5px;
}
#shopify-section-1621306027f9e92747 .image-bar {
    max-width: 100%  !important;
}
}

[cossetspace]

Hi Natztech,

Thank you for your help, this has worked somewhat but I was wondering if it can be improved

I have tried this on one of my section and it seemed to work except on the mobile device the photo appears small in relative to the text.

Also is there a way to add in the slider bar or left and right arrow so that users can see more photos that are not in frame? example like below

I see that on my site, I can swipe left or right to see the 4th image

[LitExtension]

Hi @cossetspace ,

I checked and found you have added horizontal scroll to the section. https://i.imgur.com/rnBRjUZ.png

Do you want to make another request?

[cossetspace]

Hi LitExtension,

I have added the scroll thank you, I do have another request.

On mobile, the testimonial section, the title is very close to the top edge. It looks ok on desktop, I’ve been trying to get the mobile version to be more centred

This is what desktop version looks like

[Kinjaldavra]

hello @cossetspace

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and  (max-width: 739px) {
#shopify-section-1571928729769 .page-width .section-header.text-center{
        padding-top: 50px;
}
}

[cossetspace]

Worked a treat, thanks a lot for that. If you don’t mind I have added the slick slider to my testimonial but for some reason there seems to be part of a circle inside the main circle. How do I get rid of this?

[Kinjaldavra]

hello @cossetspace

#shopify-section-1571928729769 .slick-dots li a:before, .slick-dots li button:before {
    top: -5px !important;
    left: -5px !important;
}