Jump to content

Fix Footer Link Breaks in Tablet

Recommended Posts

  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

19 hours ago, mackenzieu said:

Site URL: https://carrot-bronze-bld8.squarespace.com/

Hello,

What's the best way to resolve the link breaking issue on the footer when displaying on tablet? Would is make sense to shrink the text size for tablet size? If so, what would that code look like?

 

Screen Shot 2021-11-19 at 10.03.14 AM.png

Hi @mackenzieu

This is my suggestion about the layout in tablet

image.png.c35c0a45547ebd7279f7943e5285b5d1.png

Does it match your desire?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 11/22/2021 at 11:48 AM, mackenzieu said:

@bangank36Yes, that layout would be great. How could I accomplish that?

Try adding to Home > Design > Custom Css

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	Footer {
		.Footer-inner {
			.row {
				>.span-12 {
					>.row {
						display: flex;
						flex-wrap: wrap;
						>.col {
							&:first-child {
								width: 100%;
								.image-block-outer-wrapper {
                                  /*decrease percentage to makke logo smaller*/
									width: 50%;
									margin: auto;
								}
							}
							&:nth-child(2) {
								display: none;
							}
							&:nth-child(3) {
								width: 50%;
							}
							&:nth-child(4) {
								width: 50%;
							}
							&:last-child {
								width: 100%;
							}
						}
					}
				}
			}
		}
	}
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

You can try removing this code

 

image.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

For the smaller logo, try decreasing the percentage in this code

image.png.43155ca1ec7154c69ef8099591615002.png

Regarding the space in nav link, do you mean increasing the nav link font size? i've check that they are in 2 equal columns currently

 

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

@bangank36Thank you! 

For the nav link columns, I think something might be interfering with how they are displayed. I tried to remove the spacers in case that was causing some problems but that didn't seem to fix it either. Here's a video to show how they respond as the browser shrinks. Everything looks great at the end of the video around 900px. 

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.