thebergdesign Posted January 28, 2021 Share Posted January 28, 2021 Site URL: https://molliekeane.com/pagecv Hello, I have two buttons on a page that are displaying too big on mobile view. I would like to resize them so that they are smaller, and reposition them so that they are aligned horizontally, as opposed to vertically as they are now. Site URL: molliekeane.com Thank you in advance 😁 Beyondspace 1 Link to comment
Beyondspace Posted January 28, 2021 Share Posted January 28, 2021 43 minutes ago, thebergdesign said: Site URL: https://molliekeane.com/pagecv Hello, I have two buttons on a page that are displaying too big on mobile view. I would like to resize them so that they are smaller, and reposition them so that they are aligned horizontally, as opposed to vertically as they are now. Site URL: molliekeane.com Thank you in advance 😁 To help indentify the buttons row easier, could you add a spacer above it? I then can suggest code hide it and display buttons on 2 column on mobile Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
thebergdesign Posted February 5, 2021 Author Share Posted February 5, 2021 Hi @bangank36, thank you for your reply. I have added spacers above the buttons, but they seem to only show up on the desktop version, not the mobile. I did align the content downwards, so maybe that helped? Let me know if I should do something else. Thanks. Link to comment
tuanphan Posted February 7, 2021 Share Posted February 7, 2021 @thebergdesign Add to Design > Custom CSS /* Mobile buttons */ @media screen and (max-width:767px) { div#page-section-5fcf792b14319a51dc3334cc .span-12 .row .span-6 { width: 50% !important; float: left !important; } } 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
travisfisher Posted March 22, 2022 Share Posted March 22, 2022 @tuanphan I'm trying to do the same thing but the code did not work for me Link to comment
Beyondspace Posted March 22, 2022 Share Posted March 22, 2022 I can not find them on your site. Can you share the direct link to them? Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
Web_Solutions Posted March 23, 2022 Share Posted March 23, 2022 for this page https://molliekeane.com/pagecv-1 /* mobile buttons section*/ @media screen and (max-width: 767px) { [data-section-id="5fda25cb172dc3275651a079"] .sqs-col-12 > .ssqs-row { display: flex !important; justify-content: space-between !important; padding: 0 12px; box-sizing: border-box; .sqs-col-6{ width: auto !important; .button-block{ padding: 5px !important; } .sqs-block-button-element{ padding: 15px 25px !important; font-size: 14px !important; } } } } Unique_Website, Create_Job and Ainul 2 1 Link to comment
Web_Solutions Posted March 23, 2022 Share Posted March 23, 2022 for this page https://molliekeane.com/pagecv /* mobile buttons section*/ @media screen and (max-width: 767px) { [data-section-id="5fcf792b14319a51dc3334cc"] .sqs-col-12 > .sqs-row { display: flex !important; justify-content: space-between !important; padding: 0 12px; box-sizing: border-box; .sqs-col-6{ width: auto !important; .button-block{ padding: 5px !important; } .sqs-block-button-element{ padding: 15px 25px !important; font-size: 14px !important; } } } } for this page https://molliekeane.com/pagecv-1 /* mobile buttons section*/ @media screen and (max-width: 767px) { [data-section-id="5fda25cb172dc3275651a079"] .sqs-col-12 > .sqs-row { display: flex !important; justify-content: space-between !important; padding: 0 12px; box-sizing: border-box; .sqs-col-6{ width: auto !important; .button-block{ padding: 5px !important; } .sqs-block-button-element{ padding: 15px 25px !important; font-size: 14px !important; } } } } Unique_Website, Create_Job and Ainul 3 Link to comment
jennypetit Posted April 29, 2022 Share Posted April 29, 2022 On 2/7/2021 at 8:57 AM, tuanphan said: @thebergdesign Add to Design > Custom CSS /* Mobile buttons */ @media screen and (max-width:767px) { div#page-section-5fcf792b14319a51dc3334cc .span-12 .row .span-6 { width: 50% !important; float: left !important; } } I have a similar issue with the buttons not displaying under the images i will like as follow: text (1:1 session/reiki/massage) image button at the moment is text image text image tex image button button button https://elsa.squarespace.com/ password: elsa Link to comment
tuanphan Posted May 1, 2022 Share Posted May 1, 2022 On 4/29/2022 at 9:41 PM, jennypetit said: I have a similar issue with the buttons not displaying under the images i will like as follow: text (1:1 session/reiki/massage) image button at the moment is text image text image tex image button button button https://elsa.squarespace.com/ password: elsa No need to use code Try dragging Button 1 below Image 1 so that it appears a black line, width of line = width of Image 1 Block Do similar for Button 2, Image 2, Button 3 Image 3 then check again on mobile 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