Jump to content

Resize and reposition buttons on mobile only

Recommended Posts

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 ūüėĀ

IMG_55E94AF6388E-1.jpeg

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 plugin
If 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
  • 2 weeks later...

@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
  • 1 year later...

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 plugin
If 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

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;
      }
    }
  }
}

Screenshot_107.png

Link to comment

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;
      }
    }
  }
}

Screenshot_109.png

Screenshot_108.png

Screenshot_107.png

Link to comment
  • 1 month later...
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
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

Create an account or sign in to comment

You need to be a member in order to leave a comment

√ó
√ó
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.