Custom button settings no longer working

Site URL: https://www.ghoulsmagazine.com/editorials

Hello,

I just realised that there have been some changes from Square space side and some objects have been renamed. One of those are Buttons. They used to be small, medium large but now are primary, secondary an terdiary.

I had a custom code written for the small buttons I use on my website to make them look good on mobile and desktop. I had set width, size and font based on different screens.

this is the code which doesn't seem to work anymore. ( part of it seems to work for desktop version but not the width and font size). 

/* Small Button Styling */
.sqs-block-button-element--small {
 width: 95.95% !important;
  padding-top: 9px !important;
    padding-bottom: 9px !important;
margin-top: -20px;
margin-bottom: -20px;
  margin-left: -6px;
  font-weight: bold;
  font-size: 14px;
}

/* Small Button Styling - small Mobile */

  @media screen and (max-width:400px) and (min-width:100px) {
.sqs-block-button-element--small {
 width: 95.95% !important;
  padding-top: 9px !important;
    padding-bottom: 9px !important;
margin-top: -20px;
margin-bottom: -20px;
  margin-left: -6px;
  font-weight: bold;
  font-size: 10.5px;
}
}

@media screen and (max-width:1000px) and (min-width:400px) {
.sqs-block-button-element--small {
 width: 95.95% !important;
  padding-top: 9px !important;
    padding-bottom: 9px !important;
margin-top: -20px;
margin-bottom: -20px;
  margin-left: -6px;
  font-weight: bold;
  font-size: 12px;
}
}

COuld someone review it please?

Thanks a lot

Can you take a screenshot of buttons where you have problem?

Hi @tuanphan,

please see below. Before the changes, buttons appeared slimmer, wider, nicely spaced (horizontally and vertically) and text for the buttons on the right side was just on one line as buttons were thinner but wider, if it makes sense.

Try find this code

.sqs-block-button-element--small {
    width: 99.95% !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    margin-top: -20px;
    margin-bottom: -20px;
    margin-left: -6px;
    font-weight: bold;
    font-size: 14px;
}

and remove

    margin-top: -20px;
    margin-bottom: -20px;

Thanks,It’s better now but it looks like all the other attributes are not being picked anymore (width, font size dor different screen sizes etc)

they used to be all same size ( wider) to allow all text to fit on one line

17 hours ago, Karkom said:

Thanks,It’s better now but it looks like all the other attributes are not being picked anymore (width, font size dor different screen sizes etc)

they used to be all same size ( wider) to allow all text to fit on one line

Can you take a screenshot of the code in Custom CSS box? It shows invalid from my browser

Hey @tuanphan Thanks so much for looking into this for me!  Please see below Screenshot

On 10/6/2022 at 2:18 PM, Karkom said:

Hey @tuanphan Thanks so much for looking into this for me!  Please see below Screenshot

Change number 2 from margin top/bottom to 2px

margin-top: 2px;

margin-bottom: 2px;

Hi  @tuanphantried, it doesn't make any difference unfortunately. The biggest problem is with those 2 buttons on the right side where there are two words and  which goon 2 separate lines instead of staying in just one. 
 

Hi @tuanphan I was wondering if you had a chance to review this? thanks so much for your time! 🙂

hello everyone, just checking if there's anyone who could help me figuring out this please :)