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.
Hello orha,
Please share your site url.
So that i can check and let you know the exact solution here.
Dear Orha,
We will be happy to help you. Please contact here https://www.task4store.com/pages/contact-us
I would better like to transfer your button to the main(first) screen your button looks good!
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.
User | Count |
---|---|
57 | |
48 | |
39 | |
28 | |
16 |