A user seeks to modify their slideshow button on mobile view only (Dawn theme 15.3.0), wanting it smaller and repositioned to the bottom center. Desktop layout requires no changes.
Initial Request:
Solutions Provided:
Two CSS-based approaches were offered:
First solution (Betterave-Nina):
base.css filealign-self: flex-end on .slideshow__text.banner__boxSecond solution (Rahul_dhiman):
section-image-banner.css fileStatus: Multiple solutions offered; awaiting user confirmation on which approach works for their specific layout needs.
I attached photos of both the desktop & mobile of my slideshow. I want to change my mobile view of my slideshow to have the button either at the bottom left corner - but a lot smaller than it is now.
How do I do this? I’ve tried some codes that haven’t worked. I have Dawn 15.3.0 Version.
Mobile View (need button bottom left & smaller):
Desktop View (no change needed) :
sorry for the mistake in photos - here’s the updated photos of the mobile slideshow view:
I’d like the button to be smaller & in the center, not the left actually
Hi @ilovetogolf .
Here’s how to position that button on mobile.
1: Go to Online Store → Theme → Edit code
2: Search file base.css
3: Add the following code to the bottom of the file → Save
@media screen and (max-width: 749px) {
slideshow-component .slideshow__text.banner__box{
align-self: flex-end!important;
}
}
If done correctly the result should be like this:
I Hope this helps!
Hello @ilovetogolf
Go to online store ----> themes ----> actions ----> edit code ----> assets —> section-image-banner.css
add this code at the end of the file and save.
@media screen and (max-width: 968px) {
.banner__box>*:first-child {
margin-top: 19rem;
margin-left: 11rem;
}
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
