Shopify themes, liquid, logos, and UX
Hello everyone!
So, I found a code online and I managed to have 2 different banner pictures for both desktop and mobile.
Now I want to move the banner content (text & button) to a different position for the desktop version (all the way to the left) and on another position for the mobile version (all the way to the top). Could you please help me with that?
I can provide store URL and password through PM upon request.
Thanks!
Madeleine
Solved! Go to the solution
This is an accepted solution.
Thank you for the info.
For the desktop version (all the way to the left), is this enough or more?
If this enought try this code.
.banner__content.banner__content--middle-left.page-width, .banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient {
padding-left: 0px;
}
For the mobile version (all the way to the top).
@media only screen and (max-width:749px){
.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient {
padding-top: 10px;
position:absolute;
top: 0px;
}
}
Hi @sirensiren
Would you mind to share your Store URL website? with password if its protected. Thanks!
Yes, I sent you a PM. Thank you 🙂
This is an accepted solution.
Thank you for the info.
For the desktop version (all the way to the left), is this enough or more?
If this enought try this code.
.banner__content.banner__content--middle-left.page-width, .banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient {
padding-left: 0px;
}
For the mobile version (all the way to the top).
@media only screen and (max-width:749px){
.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient {
padding-top: 10px;
position:absolute;
top: 0px;
}
}
My dear friend, it worked for mobile but not for desktop. Any ideas why?
Please refresh it, on my side it move to the left. But I think you want far left?
Hmm, maybe it did move but I didn't notice it! Can we move it more to the left, please?
You know what, it's ok! I think this position is enough and it doesn't need further modification. Thank you so much for taking the time to help me! I appreciate it very much! 🙂 ❤️
Welcome.😊
Like this?
if it is then try this code, same instruction.
.banner__content.banner__content--middle-left.page-width {
max-width: 100%;
padding-left: 5rem;
}
And Save. if you like to adjust from the left just reduce the padidng.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025