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

[Örha]

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.

[oscprofessional]

Hello orha,

Please share your site url.

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

[Winston3]

Hey there,

Can you insert your Site url?

Regards

[MS-WEB-DESIGNER]

Dear Orha,

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

[Örha]

Hello Winston,

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

best regards

[Alex_e-Scraper]

@Örha 

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

[Winston3]

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.

[Örha]

Hello Alex,

what do you mean?

CHero

[Örha]

Thanks Winston,

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

[Winston3]

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.