Kozanno1570047785 22 Share Posted March 27, 2014 (edited) I have a single item, express checkout button on a page and I would like to increase the height and width of the button from its current small rectangular shape. Can someone help me with the CSS? Edited August 12, 2016 by sheveron Link to post
1 Guest Share Posted March 27, 2014 Think I might have a fix for you. In your layout editor select the product page. In the upper right corner select "product settings" and go to "advanced settings". Try inserting the following code into the page header: <style> .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button { height: ??px !important; width: ??px !important; text-align: center center; }</style> Keep in mind you can also add different attributes for font-size, font-family, background, etc. and obviously play with your own values where I have ??. It's important that you specify the text-alignment however, because I noticed when you adjust the dimensions of the button the text will by default be out of alignment if you don't specify this. Link to post
0 Kozanno1570047785 22 Author Share Posted March 27, 2014 Ok... Awesome. this worked and resized the button. Its exactly what I wanted at However, the text stays centered but at the top. How can I get it in the middle of the button? Link to post
0 Kozanno1570047785 22 Author Share Posted March 27, 2014 Ok... Awesome. this worked and resized the button. Its exactly what I wanted at However, the text stays centered but at the top. How can I get it in the middle of the button? Link to post
0 Guest Share Posted March 27, 2014 Okay, sorry you're right I tried to account for that using "center" twice but obviously the alignment is only left to right, not top to bottom. Here's the fix: Into the code add padding-top: 60px !important; Just looking at your dimensions this should be close to center but you can play with that value until you get it right depending on your text size. Link to post
0 Guest Share Posted March 27, 2014 Okay, sorry you're right I tried to account for that using "center" twice but obviously the alignment is only left to right, not top to bottom. Here's the fix: Into the code add padding-top: 60px !important; Just looking at your dimensions this should be close to center but you can play with that value until you get it right depending on your text size. Link to post
0 Guest Share Posted March 27, 2014 Oh, also in the original code you only need "center" once, not that it matters :) Link to post
0 Kozanno1570047785 22 Author Share Posted March 28, 2014 You've really helped me big time. Thank you very much for your answers here - I simply don't know the CSS. The only other question I could ask I guess is what exactly to type out to manipulate the font size. The style editor does not allow this function, only the style of font and color. Any last comments would be appreciated. thank you so much ! Sam Link to post
0 Kozanno1570047785 22 Author Share Posted March 28, 2014 You've really helped me big time. Thank you very much for your answers here - I simply don't know the CSS. The only other question I could ask I guess is what exactly to type out to manipulate the font size. The style editor does not allow this function, only the style of font and color. Any last comments would be appreciated. thank you so much ! Sam Link to post
Question
Kozanno1570047785 22
I have a single item, express checkout button on a page and I would like to increase the height and width of the button from its current small rectangular shape. Can someone help me with the CSS?
Edited by sheveronLink to post
Top Posters For This Question
5
Popular Days
Mar 27
7
Mar 28
2
Top Posters For This Question
Kozanno1570047785 5 posts
Popular Days
Mar 27 2014
7 posts
Mar 28 2014
2 posts
8 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment