how do i encrease the add to card button width in debut theme?

Highlighted
Tourist
4 0 2

Hello guys,

i want to encrease the add to card button in laptop view. it shows well on mobile but look shorter on on laptop screen. see picture.

 

Annotation 2020-05-26 024706.jpg

1 Like
Highlighted

Hello

Please share your site url.

So that i can check and let you know the exact solution here.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Explorer
59 5 13

Hey there,

 

Can you insert your Site url?

 

Regards

0 Likes
Highlighted
Shopify Partner
1747 108 313

Dear Orha,

 

We will be happy to help you. Please contact here https://www.task4store.com/pages/contact-us

Best Regards
MS Web Designer | MS Web International | Task4Store
Contact Us: https://www.task4store.com/pages/contact-us OR task4store@mswebdesigner.com
9.9/10 Customer Rating | 1000+ Happy Clients | 100% Satisfaction Or Money Back Guarantee
0 Likes
Highlighted
Tourist
4 0 2

Hello Winston,

was far from the project. here is the link https://www.oerha.de

best regards

 

 

1 Like
Highlighted

@Örha 

I would better like to transfer your button to the main(first) screen your button looks good!

ezgif.com-gif-maker.gif

 

regards,
Alex with eScraper
Extract any data from any website into your Shopify store.
0 Likes
Highlighted
Explorer
59 5 13

Hey Orha you might need to change the CSS by replacing this part at your Theme.scss folder. do Command+F and search for product-form.

.product-form {
  @include display-flexbox();
  @include flex-wrap(wrap);
  @include align-items(flex-end);
  width: auto;
  padding-top: 2rem;
}

.product-form--payment-button-no-variants {
  max-width: 400px;
}

.product-form__item {
  @include flex(1 1 200px);
  margin-bottom: 10px;
  padding: 0 5px;

  label {
    display: block;

    .product-form--hide-variant-labels & {
      // sass-lint:disable no-important
      position: absolute !important;
      overflow: hidden;
      clip: rect(0 0 0 0);
      height: 1px;
      width: 1px;
      margin: -1px;
      padding: 0;
      border: 0;
    }
  }
}

.product-form__item--submit {
  @include flex(1 1 300px);
}

.product-form__item--no-variants {
  max-width: 400px;
}

.product-form__item--payment-button {
  @include flex-basis(100%);

  .product-single--small-image &,
  .product-single--full-image & {
    @include media-query($large-up) {
      display: inline-flex;
      @include flex-direction(row);
      @include align-items(flex-start);
    }
  }
  &.product-form__item--no-variants {
    @include flex-direction(column);
    @include align-items(stretch);
  }
}

 

 

 

With this part (to increase the width even more be sure to change the the product form for min-width: 768px

@media only screen and (min-width: 768px) {
.product-form {
  @include display-flexbox();
  @include flex-wrap(wrap);
  @include align-items(flex-end);
max-width: 700px; width: 600px; //CHANGE THE WIDTH FOR BOTH BUTTON & QUANTITY padding-top: 2rem; } .product-form--payment-button-no-variants { max-width: 400px; } .product-form__item { @include flex(1 1 200px); margin-bottom: 10px; padding: 0 5px; label { display: block; .product-form--hide-variant-labels & { // sass-lint:disable no-important position: absolute !important; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } } } .product-form__item--submit { } .product-form__item--no-variants { max-width: 400px; } .product-form__item--payment-button { .product-single--small-image &, .product-single--full-image & { @include media-query($large-up) { display: inline-flex; @include flex-direction(row); @include align-items(flex-start); } } &.product-form__item--no-variants { } } } @media only screen and (max-width: 768px) { .product-form { @include display-flexbox(); @include flex-wrap(wrap); @include align-items(flex-end); width: auto; padding-top: 2rem; } .product-form--payment-button-no-variants { max-width: 400px; } .product-form__item { @include flex(1 1 200px); margin-bottom: 10px; padding: 0 5px; label { display: block; .product-form--hide-variant-labels & { // sass-lint:disable no-important position: absolute !important; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } } } .product-form__item--submit { @include flex(1 1 300px); } .product-form__item--no-variants { max-width: 400px; } .product-form__item--payment-button { @include flex-basis(100%); .product-single--small-image &, .product-single--full-image & { @include media-query($large-up) { display: inline-flex; @include flex-direction(row); @include align-items(flex-start); } } &.product-form__item--no-variants { @include flex-direction(column); @include align-items(stretch); } } }

Hope this help.

0 Likes
Highlighted
Tourist
4 0 2

Hello Alex,

 

what do you mean?

CHero

0 Likes
Highlighted
Tourist
4 0 2

Thanks Winston,

 

i added the code but only the Paypal button get changed.

Annotation 2020-07-06 205715.jpg

0 Likes
Highlighted
Explorer
59 5 13

Did you replace code 1 with code 2 (You must to remove code 1 and add code 2)? Because everything should have change let me check. I will let you know when i found the solution.

0 Likes