Featured collection size of the mobile only page - Broadcast Theme

Store Design
, , ,

Topic summary

A Shopify store owner using the Broadcast theme seeks to reduce the size of featured collection product images on mobile devices, wanting them to appear smaller and display two products side-by-side (similar to the BALR website example).

Initial Solution Attempt:

  • A CSS code snippet was provided to paste in theme.liquid above the </body> tag
  • The solution initially failed due to incorrect placement (below instead of above the closing body tag)
  • Even after correct placement, the code did not produce the desired effect

Working Solution:
The original poster discovered a CSS fix that successfully reduced mobile product image sizes:

@media(max-width:749px){
  .index-products .grid--mobile-slider .grid-item {
    width: calc(60% - 50px);
  }
}

Key Implementation Detail:

  • This code must be placed “below the CSS code” (likely in the theme’s CSS/SCSS file)
  • Multiple users confirmed the solution works for mobile view
  • Desktop resizing remains unresolved, with the original poster crediting another community member for the working code
Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

Hello all,

I am struggling with the featured collection size of the mobile preview page. As you could see in the picture the slider on the mobile preview is huge. I would like it to be smaller does anyone know to get this done? The ideal solution would be something like the example of the balr website. Hereby it is smaller and there are 2 products next to each other. Does anyone know how to get this done with the broadcast theme?

Screenshot 2023-06-17 at 12.16.09.png
Screenshot 2023-06-17 at 12.16.09.png436Ă—958 148 KB

Screenshot 2023-06-17 at 12.03.22.png
Screenshot 2023-06-17 at 12.03.22.png2880Ă—1800 361 KB

2

@Kashmirfashion

  1. In your Shopify Admin go to online store > themes > actions > edit code

  2. In your theme.liquid file, find the **(press CTRL + F or command + F on Mac)

  3. paste this code right above the tag:

Update the 170px value as per your wish, the smaller the value the smaller the images will be.

diego_ezfy_0-1686998040508.png
diego_ezfy_0-1686998040508.png521Ă—561 112 KB

Kind regards,
Diego

1 Like
3

Hello Diego,

Thanks for your reply for some reason it does not change at all. I have included the code in the theme editor. As you could see down below but the size still stays the same regardless of me changing the px value. See the pictures down below as reference

Screenshot 2023-06-17 at 12.03.22.png
Screenshot 2023-06-17 at 12.03.22.png2880Ă—1800 361 KB

Screenshot 2023-06-17 at 13.11.26.png
Screenshot 2023-06-17 at 13.11.26.png2880Ă—1800 666 KB

4

Did i do something wrong?

5

You have pasted the code below the instead of above

1 Like
6

Hello diego,

Thanks for the fast reply!! you are right I have changed it. However, there is still no change to the product sizes. Any clue how this is possible?

Screenshot 2023-06-17 at 12.03.22.png
Screenshot 2023-06-17 at 12.03.22.png2880Ă—1800 361 KB

Screenshot 2023-06-17 at 13.11.26.png
Screenshot 2023-06-17 at 13.11.26.png2880Ă—1800 666 KB

7

Hi Diego, I am facing the same issue and was wondering if you knew of a way to resolve this? I’ve tried everything with no solution. I appreciate your time.

8

Try this:

@media(max-width:749px){
.index-products .grid–mobile-slider .grid-item{
width:calc(60% - 50px);
}
}

this did work for me.

1 Like
9

It needs to be Below the css code

10

Wow that did shrink it thank you so much!!! If I wanted to make it smaller on the desktop version as well would you happen to know the code for this? I’m sorry to ask but I’ve been at this for a while now and haven’t had any luck until now. I appreciate your time and knowledge. Thank you!

11

Your welcome. I don’t know I got this feedback from: https://community.shopify.com/c/user/viewprofilepage/user-id/1473412

you may ask him it is his code.

1 Like
12

Thank you!

13

Hello Kashirmfashion,

I’m currently experiencing the same problem :confused: may I know where I need to paste the code you provided in? I tried pasting it in theme.liquid but it didnt seem to work :cry: and what do you mean by below the css code?

thanks!

14

Hey,

Did you manage to get this resolved? I pasted it right above the line but nothing has changed. Any ideas?

Thanks!