Hi, Does anyone know how to make the banner’s height smaller on desktop only
Similar to how it looks on mobile:
Thank you ! Best regards,
Store URL: https://servicedetable.com/pages/contact
1 Like
hi @INKLY ,
To make the banner’s height smaller only on desktop while keeping the height unchanged on mobile, you can target the desktop viewport using a media query. Here’s how you can adjust the height of the banner specifically for desktop devices:
Step 1: Go to Admin → Online store → Theme > Edit code:
Step 2: Search for the file theme.liquid. And add this code snippet before tag or :
Step 3: Save and reload home page.
=>> The result:
I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.
Have a nice day sir!
1 Like
Hi @INKLY
Check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
@media only screen and (min-width: 749px){
#s--template--22238555799880__section_slider_adaptive_tQnVQ7 .slider__image--adaptive {
height: 300px;
}
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Thank you this looks great!
Hi my friend @INKLY ,
We’re happy to see that our suggestion helped you solve the issue.
Glad to helps! 