Editing the layout of my footer menu

using chrome + firefox browsers on laptop…I see the items in footer menu – does not look unusual. Looks fine on iphone too.

Hello, in the theme’s style.css near line# 3296 within the media query of min-width: 1024px, please update one line in the following rule:

.footer-bottom .footer-bottom-right {
  /* just change the width from 30% to at least 45% */
  width: 45%; /* or higher */
}

At 30% the .footer-bottom-right flexbox is too narrow, causing the texts to get stacked on top of each other. Good luck!

Thanks Lisa, are you saying that the pages in my footer are not stacked on your view?

Best,

Jono

Hi Gerry,

Thanks for the info. I have never updated code before so just want to be sure before I save any changes in case something goes wrong.

Where exactly do I find ‘theme’s style.css near line# 3296’ – I cannot see that anywhere.

Also, with the rule you said to update it to.. do I just copy paste that?

Many thanks!

Jono

response removed by contributor

• This reply was modified 1 year ago by lisa.

When I viewed your site – the 3 items displayed in the footer menu were displayed next to each other horizontally. Sounds like you might be concerned that each items is showing on 2 lines. I agree that making the container width larger could help with that issue. A modification to your theme’s CSS code could help. Looks like you might have a custom theme. Can you contact the theme’s developer?

• This reply was modified 1 year ago by lisa.
• This reply was modified 1 year ago by lisa.

Hello Jono, let’s try it this way… in WordPress admin, click on Appearance > Customize then click on Additional CSS, then enter the following:

@media (min-width: 1024px) {
  /* Adjust footer link layout */
  .footer-bottom .footer-bottom-right {
    width: 45%;
  }
}

Click the Publish button afterwards. Then do a hard refresh in your web browser to see if the footer layout changes. Good luck!

Thank you Gerry! That worked perfectly.

Any tricks on the same outcome for mobile view? Or is it just too small there?

No worries, Jono. For the mobile version, it’s too narrow to have the menu links and the copyright all in one line, but if you’re open to try a slightly different layout, the following would avoid text getting stacked from screens 410px and above … please replace the earlier code I provided with the following:

/* Adjust footer links layout on mobile */
.footer-bottom .footer-bottom-right {
  flex-wrap: wrap-reverse;
  row-gap: 1em;
}
.footer-bottom .footer-bottom-right ul li {
  margin-left: 10px;
  margin-right: 10px;
}

@media (min-width: 640px) {
  .footer-bottom .footer-bottom-right ul li {
    margin-left: 20px;
    margin-right: 0;
  }
}

@media (min-width: 1024px) {
  /* Adjust footer link layout */
  .footer-bottom .footer-bottom-right {
    flex-wrap: nowrap;
    width: 45%;
  }
  .footer-bottom .footer-bottom-right ul li {
    margin-left: 10px;
  }
}

Same process as before. If the results of the above are not to your liking then feel free to use the earlier code provided. Good luck!