Kozanno1570047785 Posted March 27, 2014 Share Posted March 27, 2014 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? Link to comment
Guest Posted March 27, 2014 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 comment
Kozanno1570047785 Posted March 27, 2014 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 comment
Kozanno1570047785 Posted March 27, 2014 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 comment
Guest Posted March 27, 2014 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 comment
Guest Posted March 27, 2014 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 comment
Guest Posted March 27, 2014 Share Posted March 27, 2014 Oh, also in the original code you only need "center" once, not that it matters :) Link to comment
Kozanno1570047785 Posted March 28, 2014 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 comment
Kozanno1570047785 Posted March 28, 2014 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 comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.