Jump to content

buttons on mobile

Recommended Posts

  • Replies 8
  • Views 1.6k
  • Created
  • Last Reply
4 minutes ago, dbliss20 said:

Site URL: https://seabass-vuvuzela-ynfj.squarespace.com/

I am using spacers to get two buttons side by side. It looks good on desktop but on mobile, it's not stacked evenly. It looks like this on mobile

image.png.c31030be167e6f225ce13aa397aa8528.png

what can i do?

 

I can suggest adding a custom css in Design -> Custom Css

@media only screen and (max-width: 450px) {
  		#block-817798cf1b836b9c78e4 + .row .col:nth-child(3) .sqs-block-button-element,
  	  	#block-817798cf1b836b9c78e4 + .row .col:nth-child(4) .sqs-block-button-element {
        	padding-left: 5px;
            padding-right: 5px;
            text-align: center;
      }  
}
@media only screen and (max-width: 768px) {
      #block-817798cf1b836b9c78e4 + .row .col:nth-child(3),
  	  #block-817798cf1b836b9c78e4 + .row .col:nth-child(4) {
        width: 50% !important;
        float: left !important;
      }       
}

image.png.cf121900d61fb90ddd8661e786f1ab5e.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
50 minutes ago, bangank36 said:

I can suggest adding a custom css in Design -> Custom Css


@media only screen and (max-width: 450px) {
  		#block-817798cf1b836b9c78e4 + .row .col:nth-child(3) .sqs-block-button-element,
  	  	#block-817798cf1b836b9c78e4 + .row .col:nth-child(4) .sqs-block-button-element {
        	padding-left: 5px;
            padding-right: 5px;
            text-align: center;
      }  
}
@media only screen and (max-width: 768px) {
      #block-817798cf1b836b9c78e4 + .row .col:nth-child(3),
  	  #block-817798cf1b836b9c78e4 + .row .col:nth-child(4) {
        width: 50% !important;
        float: left !important;
      }       
}

image.png.cf121900d61fb90ddd8661e786f1ab5e.png

Thanks! it works well on the first page, but when i try it again on another page, it doesn't seem to work. can you check my work at 

https://seabass-vuvuzela-ynfj.squarespace.com/features

Link to comment
5 hours ago, dbliss20 said:

Thanks! it works well on the first page, but when i try it again on another page, it doesn't seem to work. can you check my work at 

https://seabass-vuvuzela-ynfj.squarespace.com/features

that because the id is different for each element, I got to use Chrome extension Find Squarespace Ids

@media only screen and (max-width: 450px) {
  		#block-5f59daefe5b3165d0c1e4ac2 + .row .col:nth-child(3) .sqs-block-button-element,
  	  	#block-5f59daefe5b3165d0c1e4ac2 + .row .col:nth-child(4) .sqs-block-button-element {
        	padding-left: 5px;
            padding-right: 5px;
            text-align: center;
      }  
}
@media only screen and (max-width: 768px) {
      #block-5f59daefe5b3165d0c1e4ac2 + .row .col:nth-child(3),
  	  #block-5f59daefe5b3165d0c1e4ac2 + .row .col:nth-child(4) {
        width: 50% !important;
        float: left !important;
      }       
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 3 months later...

Hey,

Having some trouble with these buttons alignments. They stagger in mobile mobile preview. I've tried your code above but no change. I'm not sure if I was pasting in the wrong id or if there is another reason this didn't work for me.

Any help would be appreciated!

Thank you

James

Screenshot 2021-03-23 at 18.00.13.png

Screenshot 2021-03-23 at 18.00.26.png

Link to comment
5 hours ago, barrywang said:

Hey,

Having some trouble with these buttons alignments. They stagger in mobile mobile preview. I've tried your code above but no change. I'm not sure if I was pasting in the wrong id or if there is another reason this didn't work for me.

Any help would be appreciated!

Thank you

James

Screenshot 2021-03-23 at 18.00.13.png

Screenshot 2021-03-23 at 18.00.26.png

it would help if you show the site url

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 3/26/2021 at 11:26 PM, barrywang said:

Did you get a chance to have a look at this? Still struggling to solve this on my own. 

answered on other posts

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.