Jump to content

Fix Footer Link Breaks in Tablet

Recommended Posts

  • Replies 10
  • Views 689
  • 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?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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.