Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an accepted solution.
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 </head> or </body>:
<style>
@media (min-width: 768px) {
.slide--image_slide_adaptive_PKRNwF {
height: 400px !important;
}
.slider__image--adaptive.hide-mobile {
height: 100% !important;
object-fit: cover !important;
}
}
</style>
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!
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now
@INKLY hi Hope you are well,
@media only screen and (min-width: 768px) {
.slide.adaptive {
height: 250px;
}
.slider__image--adaptive.hide-mobile {
height: 100% !important;
object-fit: cover !important;
}
}
I hope it works for you, let me know, and If you'd like to discuss this more, don't hesitate to send me a PM
This is an accepted solution.
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 </head> or </body>:
<style>
@media (min-width: 768px) {
.slide--image_slide_adaptive_PKRNwF {
height: 400px !important;
}
.slider__image--adaptive.hide-mobile {
height: 100% !important;
object-fit: cover !important;
}
}
</style>
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!
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now
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! 😍
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now
Hi @INKLY ,
How many reduced size do you want? Do you have any specific pixel for that?
Thanks.
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!
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024