I’m using the Ella theme and I’m currently encountering a problem when setting up the product pages. On the desktop version, all product images are displayed in a grid (which is how I want it to be), but on the mobile version, they are displayed as a carousel. I haven’t been able to find a way to change the mobile version to display all images in a grid, just like the desktop version. I hope someone can help me solve this problem. Thank you so much!!!
Mobile :
hey @kk19730305 share the URL of your website so i can help you
Hi,
Hope this will help
CSS example
@media (max-width: 767px) {
.product-single__photos .slick-slider {
display: block !important;
}
.product-single__photos .slick-track {
display: block !important;
transform: none !important;
}
/* This forces images to stack instead of sliding */
}
Yep, that’s normal behavior in a lot of Shopify themes, desktop gets a grid, mobile gets a slider for “better UX”. Since you’ld liike mobile to behave like desktop, you have two realistic routes, theme setting if it exists, or a small code tweak.
Option 1, try to fix it in the theme editor first
Shopify admin, Online Store, Themes, Customize
Open a product page preview
Click the section that controls the gallery, usually called Main product, Product information, Product media, or Product gallery
Look for settings like these and change them
Media layout, Gallery layout, set to Grid
Mobile layout, set to Grid
Enable swipe, Enable slider, Thumbnail slider, turn it off
Thumbnails, set to Show all, not Scroll
Save, then check on mobile
If you do not see any of those toggles, your Ella version is hard coded to use a carousel on smaller breakpoints, so you need option 2.
Option 2, force a grid on mobile with CSS
This is the fastest “tell it like it is” fix. It makes the media container wrap into a grid on small screens.
Online Store, Themes, Edit code
Find your main CSS file, often one of these
base.css
theme.css
styles.css
Paste this at the bottom
@media (max-width: 749px){
.productView-images,
.product__media-list,
.product-media,
.product-gallery{
display:flex !important;
flex-wrap:wrap !important;
gap:10px !important;
}
.productView-images .productView-image,
.product__media-list .product__media-item,
.product-gallery .item,
.product-media .item{
width:calc(50% - 5px) !important;
max-width:calc(50% - 5px) !important;
flex:0 0 calc(50% - 5px) !important;
}
}
What this does, it turns the mobile gallery into a 2 column grid. If you like 1 column instead, change the 50% to 100%.
If the carousel still “wins” and ignores the CSS, it means a slider script is injecting inline styles. Then you do option 3.
Option 3, disable the mobile slider script
Ella often uses a slider library that initializes under a breakpoint. You need to stop that init for product media.
Quick way to find it
Edit code
Search for one of these keywords
slick
swiper
carousel
productViewImages
product media slider
You will likely find code that checks window width and then runs the slider on mobile
Once you find it, you either remove the mobile init, or add a setting flag check so it never runs.
When you’re ready, tell me which exact Ella version you are on, and paste the code from your product media section file, usually something like sections main product liquid or snippets product media, plus the slider init block you find. I’ll point to the exact lines to change so it stays clean and survives updates as much as possible.
My Website URL :
thank you .
https://sex168.cc/collections/all
thank you !
Hi @kk19730305
Step 1: Disable the mobile slider (CSS)
Add this to theme.css / base.css / custom.css:
/* ELLA – Force product images grid on mobile */
@media (max-width: 767px) {
.productView-images--slider,
.productView-images--mobile,
.productView-images .slick-slider,
.productView-images .swiper-container {
display: none !important;
}
.productView-images--grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
}
This hides the slider and forces the grid to appear.
Step 2: Ensure grid markup exists (important)
Ella already renders both layouts (grid + slider) in the HTML.
The theme just toggles visibility based on screen size.
So you do NOT need to change Liquid in most cases.
If your theme version does not render the grid on mobile, tell me your Ella version and I’ll give you the exact Liquid edit.
Step 3: Remove swipe JS behavior (optional but recommended)
Add this after Ella scripts load:
document.addEventListener('DOMContentLoaded', function () {
if (window.innerWidth < 768) {
document
.querySelectorAll('.productView-images .slick-slider, .productView-images .swiper-container')
.forEach(el => el.classList.add('is-disabled'));
}
});
Best regards,
Devcoder 
i use ella 7.0.2
i paste code to base.css
/* ELLA – Force product images grid on mobile */
@media (max-width: 767px) {
.productView-images–slider,
.productView-images–mobile,
.productView-images .slick-slider,
.productView-images .swiper-container {
display: none !important;
}
.productView-images–grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
}
still see slider on mobile
please help me , thank you very much …
Hi @kk19730305
Okay, please send me the collaborator code.
I will check everything and then update you.
Best regards,
Devcoder
0857
is it right ?
I’m new to Shopify and not very familiar with how to use it.
Be careful to check the list of permissions requested and do not allow more then absolutely necessary, like “Themes” and “Write themes” in this case.
Unfortunately there were cases when “helper” from the forum was installing paid apps in the stores they “helped” to fix… 
Hi @kk19730305
I have sent you the request. Please accept it.
thank you …..
You are a good person
already accept it , thank you !!!
Ok I will check and update you.
Hi @kk19730305
Please share your email ID with me.
I asked Gemini 2.5, and they provided the following code. After adding it, I got the effect I needed. Thanks to the several helpful people who replied.
/* — START: Force Grid on Mobile — */
@media screen and (max-width: 749px) {
/* This rule applies only when ‘Grid’ layout is selected */
media-gallery.media-gallery–grid {
/* Hide the slideshow/carousel component on mobile */
& > .slideshow {
display: none;
}
*/\* Ensure the grid list is displayed on mobile \*/*
& > .media-gallery__grid {
display: grid;
}
}
}
*/* — END: Force Grid on Mobile — */
*