Resize and reposition buttons on mobile only

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 😁

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

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.

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

}

@tuanphan I'm trying to do the same thing but the code did not work for me

I can not find them on your site. Can you share the direct link to them?

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

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

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

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