Fix Footer Link Breaks in Tablet

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?

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?

 

Hi @mackenzieu

This is my suggestion about the layout in tablet

Does it match your desire?

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

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

Thanks for your help @bangank36. There's still a few issues with the footer link spacing and the email address box. Any ideas for a fix? Thank you!

You can try removing this code

@bangank36That did resolve the email issue but the nav links are still spaced strangely. Also, is there a way to decrease the size of the logo in the footer? Thank you!!!!

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

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

@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. 

@mackenzieu Do you still need help?

@tuanphanGot it figured out. Thanks!