Currently when on mobile, the slideshow only fills half of the screen. On desktop, it fills great, so don’t want to change anything there. What CSS code can I input to decrease the photo width in order to lengthen to full screen? Thanks for any suggestions!!
Topic summary
Goal: Make the slideshow on Shopify’s Origin theme fill (or nearly fill) the mobile screen height without changing desktop.
Key proposals:
- Set the banner/slideshow media height to 80vh (viewport height) on mobile (≤768px). Rationale: mobile layout places content below the slideshow; 80vh keeps space for it. Can switch to 100vh for true fullscreen.
- Force the slideshow media to 100vh on mobile (≤749px) and hide the slideshow text/content overlay to maximize image area.
- Ensure slideshow images are not constrained by width: set images to width: 100% and remove max-width limits on mobile to allow proper scaling.
Implementation notes:
- Add the CSS in Online Store → Themes → Edit code → Assets → base.css, wrapped in mobile @media queries.
- “vh” means viewport height (100vh equals full screen height).
Status and artifacts:
- Screenshots were shared to illustrate the mobile issue; no code snippets beyond CSS are required.
- The original poster has not confirmed a working fix; thread remains open without a definitive resolution.
Your content is basically below the slideshow for mobile so would recommend to make it around 80 percent of screen height
You can use the following code
@media(max-width: 768px){
.banner--large.banner--mobile-bottom:not(.banner--adapt) .banner__media, .banner--large.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt)>.banner__media {
height: 80vh;
}
}
If you wanna use full height you can change it to 100vh
Hi @casht
Please add this code at the bottom of your base.css file
@media screen and (max-width: 749px) {
.slideshow__media.banner__media { height: 100vh !important; }
.slideshow__text-wrapper.banner__content { display: none !important; }
}
1 Like
Hello @casht ,
You can try to follow these steps:
Go to Online Store → Themes → Actions → Edit code
Go to Assets folder → base.css file → add this following code at the bottom of page
@media only screen and (max-width: 767px) {
.slideshow__slide img {
width: 100%;
max-width: none;
}
}
Save changes
Hope this can help.
Ali Reviews team.
hi there ive no idea how to make a new forum regarding my query so iu thought id post on here and maybe someone could help me.. my problem is the exact same as the mans above except my slideshow uses moving animations and classes as mp4 video files which i made using canva. ive tried using your codes above and ones ive seen on other forums and they dont seem to work.. the theme i use is horizon does anyone know the relevant coding to fix this so you can see the full slideshow on mobile and desktop view?