Jump to content

Issue: Buttons layout different on mobil versus buttons in mobile view edit?

By yostudios, in Site Design & Styles

Go to solution Solved by bycrawford,

Recommended Posts

yostudios Level 4

yostudios

Posted
Posted

Hi!

Can anyone help me solve this issue? 

I have recently made my website billingual, and made this new landingpage with two language-picker buttons. My issue is, that the buttons layout are different on mobil versus the buttons in mobile view edit?

I looks like this on the web: 

image.thumb.png.340951e0a81022f7c27a7c799fa6f3c1.png

 

And it should look like this in the mobileview:

image.thumb.png.7ecff81c19a5e26642bcbc67662df650.png

 

But instead it looks like this:

image.thumb.png.757b5c5fb81f6082774d993f5ab68c16.png

I have used this custom CSS to in order to remove header and footer on this landingpage.

<style>
  .header, #footer-sections{
    display:none !important;
  }
</style>

 

Can that be what's causing the issue?

 

I would like the buttons in the mobile versions to be transparent with white font too. Can anyone help solve this?

 

Thanks! :-)

image.png

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

bycrawford
bycrawford

I have no idea what's causing the issue, BUT the solution is: .sqs-button-element--primary { border: solid 1px white !important; background: transparent !important; color: white !important; }

yostudios
yostudios

It worked perfectly! Thank you SO much! 🙂

Posted Images

  • Solution
bycrawford Level 6

bycrawford

Posted
  • Solution
Posted

I have no idea what's causing the issue, BUT the solution is: 

.sqs-button-element--primary {
  border: solid 1px white !important;
  background: transparent !important;
  color: white !important;
}

If you just want to target the buttons in that particular section, wrap the code in the section ID selector like this: 

#SECTION-ID-HERE {
.sqs-button-element--primary {
  border: solid 1px white !important;
  background: transparent !important;
  color: white !important;
}
}

 

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
Sign up to the waitlist for my course 👇
sixfiguresquare.space
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources