Add to Cart + PayPal Button in Full Width on Mobile?

Store Design
, ,
1

Hey, I have a problem. I’d like my buttons to display in full width on mobile, as mentioned above.

I’m using the Dawn Theme and have tried modifying the code for

.product__info-wrapper, .product-form, .product-form__buttons

but even with !important, nothing seems to work. I’m getting a bit frustrated.

The buttons are constrained by their containers, but I can’t find a way to remove this limitation specifically for these two buttons. I’d be grateful for any help!

P.S. My domain is stunnyclothing.com, in case that helps with the solution.

2 Likes
2

Hello @Stunny

Yes, it is already in full width.

websensepro_0-1734696490095.png
websensepro_0-1734696490095.png315×512 17.1 KB

3

its not, there is a gap left and right. Should be like that:

Example.png
Example.png996×1298 113 KB

4

Hey @Stunny

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1734698533123.png
Moeed_0-1734698533123.png349×749 27.6 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

5

Hi @Stunny

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(max-width:767px){
product-form.product-form {
    width: 108% !important;
    right: 17px;
    position: relative;
  }
}

Result:

websensepro_0-1734699190993.png
websensepro_0-1734699190993.png424×516 22.3 KB

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!

6

Hi @Stunny

Please go to Theme editor > Theme settings > Custom CSS to add this code:

@media (max-width: 768px) {
.product-form__buttons {
max-width: 100vw!important;
margin-left: -1.5rem;
margin-right: -1.5rem;
}
}
For example:

LizHoang_0-1734709337970.png
LizHoang_0-1734709337970.png400×201 51.9 KB

And you should get the result as below:

LizHoang_2-1734709449234.png
LizHoang_2-1734709449234.png384×688 36.2 KB

I hope my answer is helpful!

Best,
Liz.

7

thank yall. But thats not the Solution i like. The whole page is now swipe able on the x. Is there not any possibilty to just exclude these two buttons from the grid/Container?

8

Can you please try again with this set of code instead?
@media (max-width: 768px) {
.product-form__buttons {
box-sizing: border-box;
max-width: 100vw!important;
margin-left: -1.5rem;
margin-right: -1.5rem;
}
}