raego Posted February 5 Share Posted February 5 (edited) I am trying to center align the 'Sign Up' button in the footer of this website on mobile only (this section is fluid engine). The code below does not seem to work. @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1675639492851_7264 * { text-align: center; } } Edited February 5 by raego Link to comment
Mdhanjal Posted February 6 Share Posted February 6 can you share url pls? Hi, I'm BITTU. A website developer with 10 years experience with Squarespace. if you need help and work with me email me here :- mandeepsquarespace@gmail.com Website:- dhanjalsolution.com Best Hourly Rate :- $15 Per Hour Link to comment
raego Posted February 6 Author Share Posted February 6 https://www.giftandcrate.com.au/ Link to comment
Mdhanjal Posted February 6 Share Posted February 6 @media only screen and (max-width: 640px) { #siteWrapper.site-wrapper .sqs-button-element--primary { line-height: normal; border-style: solid; margin-left: 47px; } } Hi, I'm BITTU. A website developer with 10 years experience with Squarespace. if you need help and work with me email me here :- mandeepsquarespace@gmail.com Website:- dhanjalsolution.com Best Hourly Rate :- $15 Per Hour Link to comment
Solution Ziggy Posted February 6 Solution Share Posted February 6 Hi @raego I would recommend firstly changing the block to take up the full 8 grid columns on mobile (you should also make it wider on desktop) this won't change the size of the button, just the block container. Then add this Custom CSS to center the button within that container: @media only screen and (max-width:767px) { #block-yui_3_17_2_1_1675639492851_7264 { .sqs-block-button-container--left { justify-content: center; } } } Please let me know if that works for you! Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
raego Posted February 6 Author Share Posted February 6 8 hours ago, Ziggy said: Hi @raego I would recommend firstly changing the block to take up the full 8 grid columns on mobile (you should also make it wider on desktop) this won't change the size of the button, just the block container. Then add this Custom CSS to center the button within that container: @media only screen and (max-width:767px) { #block-yui_3_17_2_1_1675639492851_7264 { .sqs-block-button-container--left { justify-content: center; } } } Please let me know if that works for you! This worked great, thank you! Ziggy 1 Link to comment
Ziggy Posted February 6 Share Posted February 6 3 minutes ago, raego said: This worked great, thank you! Looks perfect! justinjamesclack 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
justinjamesclack Posted August 22 Share Posted August 22 (edited) Hi there, I am looking for a similar solution, however I have 2 buttons, text boxes and an image that I want to stack when the responsive screen changes to the tablet widths into mobile widths. https://www.justinjamescreative.co.uk/alternative-home-page Any help would be amazing thank you. Justin Edited August 22 by justinjamesclack Link to comment
tuanphan Posted August 23 Share Posted August 23 3 hours ago, justinjamesclack said: Hi there, I am looking for a similar solution, however I have 2 buttons, text boxes and an image that I want to stack when the responsive screen changes to the tablet widths into mobile widths. https://www.justinjamescreative.co.uk/alternative-home-page Any help would be amazing thank you. Justin Add this to Custom CSS /* Fluid Engine Stacked */ @media screen and (max-width:991px) and (min-width:768px) { .fe-64dc9632bd53181591fc2624>div { grid-area: unset !important; display: block !important; width: 100% !important; margin-bottom: 20px; } .fe-64dc9632bd53181591fc2624 { display: block !important; padding-left: 6vw; padding-right: 6vw; } .fe-64dc9632bd53181591fc2624 .sqs-block-image .design-layout-fluid * { position: relative !important; } } justinjamesclack 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment