Hey there, happy holidays! I’m trying to move the button on my store’s mobile version.
Fortunately so far I’ve been able to move the button in the desktop version already, which somehow moved around my button in the mobile version. And I cannot find a way to move the mobile version button (left - right and up - down) anymore at all.
Could somebody help me out with this?
I’d be very grateful to hear your ideas.
On the pictures you can see the current desktop version and the current mobile version.
I’d want the button to be placed in the mobile version the same way it is in the desktop version.
Hi @Nancy888
Okay, please give me the URL of your store and also provide screenshots of how you want the button to appear on mobile.
Hi @Nancy888
I understand that you need assistance changing the position of the button on the mobile version.
However, I noticed you haven’t shared any images.
Can you share with me your store URL and the button you want to move. I will give you CSS code to move it as you wish.
Look forward to your response!
Best,
Daisy
Hey @Nancy888
Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.
Best Regards,
Moeed
@Nancy888 No problem, just send your preview URL.
Password???
rogloh
- Go to Online Store → Theme → Edit code.
- Open your theme.css / based.css file and paste the code in the bottom of the file.
.banner__box.content-container.content-container--full-width-mobile.color-scheme-3.gradient {
height: 100% !important;
display: flex;
justify-content: flex-start;
}
@media(max-width:541px){
.banner__box.content-container.content-container--full-width-mobile.color-scheme-3.gradient {
margin-left: 50px;
}
}
@media screen and (min-width: 541px) and (max-width: 767px){
.banner__box.content-container.content-container--full-width-mobile.color-scheme-3.gradient {
margin-left: 81px;
}
}
If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!
Hi @Nancy888
You can follow the steps here:
Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there
Here is the code for step 3:
@media screen and (max-width: 768px){
.banner__buttons {
position: absolute !important;
left: 25px;
top: 150px;
}
}
Here is the result:
Please let me know if it works!
Best,
Daisy