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

Add the following to Design > Custom CSS.

.header-menu-nav-item a {

  line-height: 1.3em;
  
  }

Let us know how it goes.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

Link to post
  • 2 weeks later...

Create an account or sign in to comment

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


×
×
  • Create New...