Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Mobile navigation squished


Recommended Posts

  • Replies 14
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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!

Posted Images

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%;
}
}

image.thumb.png.46e25464eacd80c5ff0c2737eead0d1b.png

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.

Link to post

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!

Link to post
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..

image.thumb.png.98ba984bec65fca71dc208df8a4b1f33.png

 

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;}
}

 

Link to post

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!

Link to post
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.

Link to post
  • 2 weeks later...
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%;
}
}

image.thumb.png.46e25464eacd80c5ff0c2737eead0d1b.png

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

IMG_83E9B0D5BE3D-1.jpeg

Link to post
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

IMG_83E9B0D5BE3D-1.jpeg

Add to Home > Design > Custom CSS

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

 

Link to post
  • 2 weeks later...
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

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...