Jump to content

Custom button settings no longer working

Recommended Posts

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

 

 

 

Edited by Karkom
Link to comment
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

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;

 

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
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 lineDC77D92D-1794-4D70-B134-294945CD76E2.thumb.jpeg.fa172ae1c548c23231913debb85c3b19.jpeg

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

image.thumb.png.69fc7256c264abe488e3b7d82d4e22a7.png

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

image.thumb.png.312f411131e91be03ce8bfdf5e47ec01.png

Change number 2 from margin top/bottom to 2px

margin-top: 2px;

margin-bottom: 2px;

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.