Solutions Please ??
Topic summary
A user is experiencing issues with a slideshow image not displaying responsively on mobile and tablet devices. The image appears cut off at the top rather than showing in full.
Initial Solutions Attempted:
- MandasaTech provided CSS code to add to theme.liquid targeting mobile hero elements with min-height: 100%
- GemPages support team also offered CSS solutions to be inserted before the tag
Ongoing Problem:
- After implementing the first solution, the image became better but remained cropped at the top on mobile
- A second CSS fix was provided targeting the hero container with margin-top adjustments
- The issue persists and has now also appeared on desktop, not just mobile/tablet
Current Status:
The discussion remains unresolved. Multiple CSS solutions have been attempted, but the slideshow image continues to be cut off across devices. Screenshots were shared showing both the cropped version and the full intended image for reference.
Hello @sabitzer ,
It’s GemPages support team and glad to support you today.
Could you please share your store URL ( with the password if your store password is enabled ) then I can see and suggest something for you?
Best regards,
GemPages Support Team
here is my store url
Hello @sabitzer
I would like to give you a solution to support you:
- Go to Online Store-> Theme-> Edit code
- Open your theme.liquid theme file
- Paste the below code before :
<style>
@media screen and (max-width: 769px){
.hero-mobile-xlarge {
min-height: 100% !important;
}
}
</style>
Was my reply helpful? Please Like and Accept Solution. This mean alot to me.
Hello @sabitzer ,
I would like to give you the recommendation to support you so kindly follow the steps below:
- Go to Online Store > Theme > Edit code of your current theme
-
Open your theme.liquid theme file
-
Paste the below code before
For example,
If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team
It’s better now, but the image is cut at the top, we can’t see it in full, any solutions please so that we can see it in full without it being cut?
here is the full picture :
It’s better now, but the image is cut at the top, we can’t see it in full, any solutions please so that we can see it in full without it being cut ?
here is the full picture :
- Go to Online Store-> Theme-> Edit code
- Open your theme.liquid theme file
- Paste the below code before :
<style>
@media screen and (max-width: 769px){
.announcement-active .hero-header.hero-container {
margin-top: 0px !important;
}
}
</style>
Was my reply helpful? Please Like and Accept Solution. This mean alot to me.
