buttons on mobile

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

what can i do?

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

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

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

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

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

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

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

it would help if you show the site url

https://www.versefilmprojects.org/ghhm

Password: 2021

Thank you!

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

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