Hi,
The text and button elements are locked for the mobile positioning and cannot move.
Please help me move it down.
Here is my URL: https://atelier-rue.myshopify.com/
PWD: 12345
Thank you
Topic summary
A user needs to reposition text and button elements lower on their homepage hero section for mobile devices only, as these elements are currently locked in place and cannot be moved through standard settings.
Problem Details:
- Elements are stuck in their current mobile position
- Issue affects the homepage hero/banner section
- Desktop positioning is fine; only mobile needs adjustment
Proposed Solutions:
Multiple developers offered CSS-based fixes, all following a similar approach:
- Navigate to Online Store → Themes → Actions → Edit Code
- Locate either
section-image-banner.cssorbase.cssfile - Add mobile-specific CSS using
@media screen and (max-width: 749px)or similar breakpoints - Target
.banner__boxclass with adjustedtoporpadding-topvalues
The solutions vary slightly in implementation (different CSS properties and pixel values) but share the same core methodology. Screenshots were provided showing the expected results after applying the code.
Status: Multiple solutions offered; awaiting confirmation from the original poster on which approach worked.
2 Likes
Hello @vincentthegoat
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: 749px) {
.banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
top: 3rem !important;
}
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
before the body ----->
if this code work please do not forget to like and mark it solution
Hello @vincentthegoat ,
Here are the steps to apply the necessary changes in your Shopify store:
- In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
- Locate Asset > base.css and paste the following code at the bottom of the file:
@media screen and (max-width:750px){
.banner__box {
padding: 2rem 1.5rem !important;
}
}
Let me know if you need further assistance!
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
@media screen and (max-width:768px){
.banner__box {
padding-top: 10px !important;
}
}
Result
Best,
DaisyVo
1 Like