Jump to content

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

Go to solution Solved by bycrawford,

Recommended Posts

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

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

×
×
  • 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.