Jump to content

Change homepage layout on mobile version with custom css

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
  • Views 613
  • Created
  • Last Reply
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Archived

This topic is now archived and is closed to further replies.

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