Jump to content

Change homepage layout on mobile version with custom css

Go to solution Solved by humxahafeex,

Recommended Posts

Site URL: http://klaenemasonry.com

Hello. The mobile version of my homepage has an issue with the navigation links overlapping text. I don't want to do an overall edit as I like the layout of the desktop and tablet version. How can I edit this for only the mobile version? I am okay with taking the text out and leaving my business heading and navigations only. Thank!

Link to comment
  • Replies 12
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

4 minutes ago, Klaene said:

Site URL: http://klaenemasonry.com

Hello. The mobile version of my homepage has an issue with the navigation links overlapping text. I don't want to do an overall edit as I like the layout of the desktop and tablet version. How can I edit this for only the mobile version? I am okay with taking the text out and leaving my business heading and navigations only. Thank!

Hi @Klaene I see you are using Cover page on which we cann't apply any CSS or anything to Fix it , What you can do is to go to styling of cover page and decrese the line height of nav font. It will fix the issue 🙂

Link to comment
4 minutes ago, humxahafeex said:

Hi @Klaene I see you are using Cover page on which we cann't apply any CSS or anything to Fix it , What you can do is to go to styling of cover page and decrese the line height of nav font. It will fix the issue 🙂

Cover Page has Page Header, to insert CSS ✌️

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
  • Solution
10 minutes ago, Klaene said:

Thank you for the responses. I’m confused, can I adjust with css? If so, how?

Hi , Sorry If you got confused , You can use the following code to get it fixed. Just simply click on gear icon in front of page name it will pop up a list of options from there select advance and you will see some space to put in code paste the code there it will fix the issue right away. Pics are also attached to assist you in better way.

<style>
  [data-slice-type="navigation"] ul li:not(:last-child) {
    margin-bottom: 0px !important; 
}
</style>

Hope it helps. Don't forget to mark it as solved if it works 🙂 

s1.PNG

s2.PNG

Link to comment
8 minutes ago, Klaene said:

Thank you so much for helping. Unfortunately, it didn't quite fix it. The top navigation button "bio" is still overlapping the text. We're so close😁

Add this code too.

.sqs-slide-wrapper[data-slide-type="cover-page"] .responsive-wrapper.stacked .sqs-slice:not(:last-child):not([data-content-empty="true"]) {
    margin-bottom: 0px !important;
}

 

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.