Hi,
I was wondering how I can get the text and button to match the positioning that I have on the desktop view. I just don’t want the text and button to be over the faces/body of my models in the image.
Link: ourodyssey.co
PW: persevere.
Topic summary
A user is trying to reposition text and buttons on an image banner in Shopify’s Dawn theme so they don’t overlap the model’s face/body on mobile view, while matching the desktop layout.
Initial Solutions Provided:
- Multiple contributors offered CSS code snippets to add to
base.cssortheme.liquid - The user initially implemented a solution from infoatcodelab7 that successfully fixed mobile positioning
Current Problem:
- The mobile fix inadvertently changed the desktop view from its original position
- The user needs mobile and desktop views to remain independent of each other
Ongoing Troubleshooting:
- infoatcodelab7 provided updated code with a media query (
@media(max-width:991px)) intended to target only mobile - Despite trying both replacement code and removing previous code, the desktop view remains affected
- The issue appears unresolved, with the user still seeking a way to fix desktop positioning while maintaining the mobile correction
Screenshots were shared showing the desktop/mobile discrepancies and code implementation attempts.
Please put in below code to the last line of base.css
by going to your store admin > Online Store > Themes > Actions > Edit code > Assets folder. (https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/edit-theme-code)
@media screen and (max-width: 749px) {
.banner .banner__buttons {
margin-bottom: 50vw;
}
}
1 Like
Hi @dominnows
You can try this code by following these steps:
Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag
Hope this answer helps.
Best regards,
Victor | PageFly
1 Like
Hi @dominnows ,
Glad to support you today.
You can check out my suggestion below to get your concern resolved:
- Go to Edit code on Online Store:
- add my code above the tag on Theme.liquid:
I hope you find the answer helpful.
Kind & Best regards,
GemPages Support Team.
1 Like
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file section-image-banner.css
Step 3: Paste the below code at bottom of the file → Save
@media(max-width:1250px){
.banner__box.content-container {
position: absolute;
top: 0;
padding-top: 10px;
}
.banner__buttons {
margin-top: 5px !important;
}
}
1 Like
Thank you all for the solutions I greatly appreciate it but @infoatcodelab7 seemed to have the best one for my situation.
Hi all again,
Since using @infoatcodelab7 's solution, it looks fine on mobile, however it’s changed the view on desktop and I need it to be it’s original position like in my original post. How do I keep those views separate from each other and not mirroring one another?
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file section-image-banner.css
Step 3: Paste the below code at bottom of the file → Save
@media(max-width:991px){
.banner__box.content-container {
position: absolute;
top: 0;
padding-top: 10px;
}
.banner__buttons {
margin-top: 5px !important;
}
}
I added that code alongside the previous code that you gave me to fix the banner on mobile view however, nothing has changed with the desktop view. I’ve tried removing the previous code used to fix the mobile view and still no change.
The code given earlier is to be removed and replaced with this new code..
The code still only affects mobile view. How can I fix the desktop view?