Why my slideshow view in mobile phone is showing like this?
Topic summary
Main issue: Mobile slideshow layout problems (extra space between image, button, and pagination) and, after an initial attempt, the desktop image became oversized.
Key steps and fixes:
- Initial code added to theme.liquid did not resolve the mobile spacing and affected desktop.
- Revised approach: remove the earlier change, add updated code in theme.liquid, and delete a rule in base.css (line ~3580): .banner__medi a { position: inherit !important; }. This improved layout.
- Remaining problem: the call-to-action button sat mid-image on mobile while correct on desktop.
- Final adjustment: keep prior changes and add CSS in theme.liquid: .banner__content { align-items: flex-end !important; }. This aligned the button to the bottom on mobile.
Outcome: Slideshow alignment issue resolved; user confirmed success. Multiple screenshots were central to diagnosing and verifying fixes.
Next topic raised: Request for help integrating a shipment carrier for a Shopify store in Jordan to deliver domestically and internationally. This new question remains unanswered in the thread.
Hey @Omar_Serhan
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
still same issue there is a space between the slideshow image, button, and pagination. It also ruined the desktop view, the image became very large.
Hey @Omar_Serhan
Remove the previous code and add this new code with the same steps mentioned above in your theme.liquid file
After this, go into base.css file line number 3580 and remove this code below
.banner__media {
position: inherit !important;
}
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
1 Like
for mobile view the button is shown at the middle of the image where as in the desktop view its in the right place
desktop
mobile
Hey @Omar_Serhan
Keep the previous code and add this new code above in theme.liquid file
.banner__content {
align-items: flex-end !important;
}
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Thank you so much!!!
Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.
can you help me add a shipment carrier to my shopify website. My store is in Jordan and I want to deliver my products inside and outside Jordan.