Mobile navigation squished

Site URL: https://leslilasfrenchschool.squarespace.com

When navigation headers go on 2 lines, the lines are squished. Is there a way to resolve this?

Site password: virginie

Add the following to Design > Custom CSS.

.header-menu-nav-item a {

  line-height: 1.3em;
  
  }

Let us know how it goes.

That worked! Thank you!

7 hours ago, PenelopeS said:

That worked! Thank you!

I see on Tablet, Footer look ugly with 5 columns/row, I think you can change to 3 columns - 2 columns. What do you think?

You can add this to Home > Design > Custom CSS

/* Footer on tablet */
@media screen and (min-width:768px) and (max-width:991px) {
div#page-section-5f8b8aa91caa082825111edd .span-5 {
    width: 83.333%;
}
div#page-section-5f8b8aa91caa082825111edd .span-2:nth-child(n+2) {
    width: 50%;
}
}

Some les lilas images is 1 image/row, I think you can set them 2 images/row with this CSS

/* les lilas 2 images row */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1603238355651_73538+.row>.span-3 {
    width: 50% !important;
    float: left !important;
}
}

some pages on mobile has long content, you can consider add a back to top button. If you want this I will give the code.

Thanks for your suggestions @tuanphan !

1) In the first code to change from 5 columns to 3 and 2 columns, is it possible to have the text on the right span two-thirds of the width? ie, the 3 columns include logo, contact  and address, and under that, we have hours on a third of the width, and the text on 2/3 of the width.

2) I am not sure what the second code refers to (the 2 images per row). I put the code in but I can't tell what changed.

3) Would the back to top button just be on mobile? Or do you think it's needed for bigger screens too?

I really appreciate your help. This is the first website I'm building, and I'm learning as I'm going!

On 11/10/2020 at 4:00 PM, PenelopeS said:

Thanks for your suggestions @tuanphan !

1) In the first code to change from 5 columns to 3 and 2 columns, is it possible to have the text on the right span two-thirds of the width? ie, the 3 columns include logo, contact  and address, and under that, we have hours on a third of the width, and the text on 2/3 of the width.

2) I am not sure what the second code refers to (the 2 images per row). I put the code in but I can't tell what changed.

3) Would the back to top button just be on mobile? Or do you think it's needed for bigger screens too?

I really appreciate your help. This is the first website I'm building, and I'm learning as I'm going!

1. It seems you solved.

2. I think these images..

3. You can follow this guide.

Then to hide Back to top on bigger screen, add this to Home > Design > Custom CSS

/* hide back to top */
@media screen and (min-width:992px) {
	.t-top {display: none !important;}
}

Thanks for the clarifications!

Everything worked great!

I just have a few questions on the back to top button:
It only works once on each page—I scroll to the bottom, click on it, and it sends me back to the top of the page. But if I scroll down again, it doesn't work when I click on it.

Can it change color when it's on a different background? My pages are white, but my footer is dark grey.

Can it just appear in the footer?

Thanks!

10 hours ago, PenelopeS said:

Everything worked great!

I just have a few questions on the back to top button:
It only works once on each page—I scroll to the bottom, click on it, and it sends me back to the top of the page. But if I scroll down again, it doesn't work when I click on it.

Can it change color when it's on a different background? My pages are white, but my footer is dark grey.

Can it just appear in the footer?

Thanks!

Hi. Do you use Personal Plan or higher?

If higher, I will send the better code.

@tuanphan I am on the Business Plan.

On 11/5/2020 at 2:43 PM, tuanphan said:

I see on Tablet, Footer look ugly with 5 columns/row, I think you can change to 3 columns - 2 columns. What do you think?

You can add this to Home > Design > Custom CSS

/* Footer on tablet */
@media screen and (min-width:768px) and (max-width:991px) {
div#page-section-5f8b8aa91caa082825111edd .span-5 {
    width: 83.333%;
}
div#page-section-5f8b8aa91caa082825111edd .span-2:nth-child(n+2) {
    width: 50%;
}
}

Some les lilas images is 1 image/row, I think you can set them 2 images/row with this CSS

/* les lilas 2 images row */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1603238355651_73538+.row>.span-3 {
    width: 50% !important;
    float: left !important;
}
}

some pages on mobile has long content, you can consider add a back to top button. If you want this I will give the code.

Hi, I have a similar problem. The navigation links at the bottom (footer?) look squished on my mobile site. Can I use a version of your fix on my site too?

www.paultlevinart.com 

Thanks in advance,

Paul

7 hours ago, paultlevinart said:

Hi, I have a similar problem. The navigation links at the bottom (footer?) look squished on my mobile site. Can I use a version of your fix on my site too?

www.paultlevinart.com 

Thanks in advance,

Paul

Add to Home > Design > Custom CSS

/* mobile pagination size */
@media screen and (max-width:767px) {
h2.item-pagination-title {
    font-size: 18px !Important;
}
}

Hi @tuanphan,

You mentioned you could send me code for a better back to top button. I'm on the business plan. Thanks for your help.

On 11/24/2020 at 1:56 PM, PenelopeS said:

Hi @tuanphan,

You mentioned you could send me code for a better back to top button. I'm on the business plan. Thanks for your help.

 

Use this code

Thank you @tuanphan.