Jump to content

CSS to Style Banner Button on Mobile - v7.0

Go to solution Solved by Web_Solutions,

Recommended Posts

Hi there,

Would anyone be able to help me change the font-size and increase the padding (or button size) on the banner button, on mobiles only? (I'm using SS version 7.0, Marquee template.)

The button looks normal sized on desktops but super small on mobiles.

I've successfully located it and modified it within Chrome's Inspector, but this code doesn't work when pasted into CSS and I can't work out what's required. 

NB - I do also have this bit of CSS to increase the font-size of the Banner Description. Maybe this affects things? 

@media screen and (max-width: 640px)
{
   .page-desc p 
  {
  font-size: 23px;
  padding: 10px !important;
}
}

Thanks.

Ed

Link to comment
  • Replies 5
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Hey Ed, for questions regarding code, it's much easier if you post a link to your website. It doesn't look like the CSS selector you have is correct for a button, that looks like it would be for text only. Since there are many possible places in Squarespace to add a button, I can give you the exact code if you can provide a link to the page you're trying to style.

If an answer I provide helps you, please mark it as the answer so others can easily access it as well.

I'm a Squarespace Authorized TrainerSquarespace Expert, and Circle Member and I've been helping my clients as well as those here in the forum and in various Squarespace groups with custom coding and support for Squarespace websites. I would love to help you in any way I can.

Squarespace PluginsBook Live Help | Squarespace Video Tutorials | Buy Me a Coffee

Link to comment
  • Solution
45 minutes ago, Jareth said:

Hi there,

(Sorry, first time post.) I did enter my URL into a separate field, thinking it would come through, but clearly not. Thanks.

https://www.sohovocaltuition.com/ 

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS.

@media screen and (max-width: 640px) {
  .extra-description-formatting .page-desc p:last-child>a {
    font-size: 18px !important;
    margin-top: 0 !important;
    padding: 1em 2em !important;
  }
}

 

Screenshot_288.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
8 hours ago, Jareth said:

Thank you so much, Web_Solutions. It works a treat!  (My initial attempt left out the margin and padding code, which (for whatever reason) meant it didn't work at all.

🙏

 

Sorry I didn't understand. 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

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.