Jump to content

Links in footer disappear in mobile view

Go to solution Solved by tuanphan,

Recommended Posts

Hello,

This one has me scratching my head, so if anyone can help me figure this one out, that would be amazing and greatly appreciated! 

For some reason, the links in my footer disappear in mobile view but not in desktop view.

And also, only the links on the left hand side of the footer, and not on the right hand side.

https://unravelyourphotos.squarespace.com/hello
Password: uyp2022

If anyone can help, please let me know!

Thanks,
Rhonda

Link to comment
  • Replies 6
  • Views 627
  • Created
  • Last Reply

Top Posters In This Topic

I've worked out that it's this bit of code that's causing the problem:

/*Maintains columns in footer*/
#block-c9e98a4ca5cbdd488f1c {
  width: 50% !important;
  float: left !important;
}

However, I need the code so that the left hand side of the footer and the right hand side of the footer remain on the same line in mobile view.

@tuanphan@bangank36 Wondering if either of you might have any idea how I might resolve this?

Thanks so much!
Rhonda

Link to comment

Sorry, I should clarify, that the link text doesn't disappear. 

It's the link/pointer effect itself—ie. the ability to click on the text.

ie. In the screenshot below, the link on the right hand side (@unravelyourphotos) links to Instagram and works.

However, the links on the left hand side (Enquire / Subscribe) do not work. If you hover over them, no "hand" appears indicating you can click on the links. Instead, the cursor remains a pointer and there's nothing to click on. 

Hope that makes more sense.

2050248015_ScreenShot2022-11-04at5_58_06pm.thumb.png.16f97af837b50c5f876f26ad0ae0e627.png

Link to comment
  • Solution
On 11/7/2022 at 10:40 AM, rhondahymason said:

I changed it cause I couldn't figure it out and didn't want dead-end links.

I've put it back now in case you can figure it out? 

Thanks @tuanphan!

Try adding this to Design > Custom CSS

/* Fix Mobile Footer Links */
@media screen and (max-width:640px) {
div#footerBlocksMiddle .span-12>.row>.col {
    width: 50% !important;
    float: left !important;
}
div#footerBlocksMiddle .span-12>.row>.col * {
    white-space: nowrap !important;
}
}

 

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
19 hours ago, tuanphan said:

Try adding this to Design > Custom CSS

/* Fix Mobile Footer Links */
@media screen and (max-width:640px) {
div#footerBlocksMiddle .span-12>.row>.col {
    width: 50% !important;
    float: left !important;
}
div#footerBlocksMiddle .span-12>.row>.col * {
    white-space: nowrap !important;
}
}

 

@tuanphan That worked a treat! You are absolutely amazing, and so generous with your time and expertise. I cannot thank you enough. Do you have a page where we can donate to buy you a cup of coffee or something? If not, you should really set one up, because I would love to do just that! 

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.