Anyone know how i can make it so on desktop the image is being shown completely like it is on mobile? Would be very appreciated!!
How desktop looks:
How i want it to look like mobile:
Topic summary
-
Author requests help to make a slideshow/hero banner image display fully on desktop, matching the mobile view where the entire image is visible.
-
Problem described: On desktop the image appears cropped/zoomed, while on mobile it shows completely. They want the desktop slideshow to show the full image “like mobile.”
-
Evidence provided: Two screenshots comparing desktop vs. mobile rendering. The visuals are central to understanding the issue. A live page URL was shared: https://royalsurge.shop/pages/archive.
-
Context: Store Design > design. The issue concerns responsive image behavior in a slideshow/slider component across breakpoints.
-
Requested outcome: Guidance on settings or styling so the desktop slideshow preserves the whole image (no cropping), consistent with mobile.
-
Status: No solutions or replies yet; no decisions or action items reported. The request remains open/unsolved.
1 Like
My website is Celebrities – Royal Surge
Im using Horizon 3.2.0
I know? Why do you say that?
Hi @ExoticSouls
Isssue is that your image aspect ratio is not compatible with the hero banner on desktop. As it is higher than it is wide. I mean, you could change height so from the current 600 px height to 2100px but that would not make sense. You would take too much space and even though you do not have a call to action button there.
Plus one you have is a bit blury and it gets stretched a bit. So looks like bad quality.
I do suggest you use the option “Custom mobile media” and set a different image on mobile.
Also, if you would be kind and edit your topic title, as you do not need help in title and especially not in all capital letters.
You can add this code to the Custom CSS of your Slideshow section to change its appearance on desktop, but the image will not fill your screen.
.slide__image { object-fit: contain; }
On top of what Laza suggested, also pay attention to your settings in this area, especially “Height”:
Also, if you click “Edit image”, there is the often overlooked “Set focal point” functionality – this allows you to set point which will be always visible when image is cropped.
So, say if you set focal point around guys neck in your image, it will be always visible even if the image is cropped.
Finally, if nothing above works for you. consider using 2 sections – one for desktop and another for mobile:
1 Like
Hi @ExoticSouls
You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </head> tag
<style>
.slide__image-container>.slide__image {
object-fit: contain !important;
}
</style>
Result:
Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!