Issues In Footer Widget Area

Support
#1

Hi Support,

I’m having a bit of trouble setting up the widgets in my footer area. I have a few issues.

  1. I’d like for them to be centered within their respective widget space (right now they look left aligned)
  2. I can’t seem to get the text within the middle widget to be center aligned
  3. I’m also not sure how to get the Youtube icon to line up with the other 2 icons
    Please see screenshot…
    I did try to inspect these elements with the chrome developer tools, but when I’d try to copy a class over, I could never accomplish anything. I’m not sure if I was copying it over correctly so I could style it. Is custom css the only way to adjust these widgets?

Any help is much appreciated!

#2

Hello @burnich,

Thanks for asking. :slight_smile:

You can add following CSS under X > Theme Options > CSS:

footer.x-colophon.top .x-container {
    display: flex;
    justify-content: center;
}

footer.x-colophon.top .x-column:nth-child(2) {
    text-align: center;
}

If you would like to learn about CSS flex property, please take a look at following resource:

https://www.w3schools.com/css/css3_flexbox.asp

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

#3

Thank you so much for your response. I did use the code you suggested and it helped quite a bit. I would like to add a little bit of space between my social icons though. I tried the following css to fix the issue:

footer.x-colophon.top .x-column:nth-child(3) {
display: flex;
justify-content: space-between;
}

I must be doing something wrong. Please see screenshot…

I did watch some of the video. I think if I did some of the prerequisites for it, it could be super helpful.

#4

Hello @burnich,

Thanks for updating the thread.

You can add following CSS under X > Theme Options > CSS:

footer.x-colophon.top [data-x-icon], [class*="x-icon-"] {
    padding: 0 10px !important;
}

Let us know how it goes.

Thanks.

#5

That worked great! Thank you. I do have one more question about how to use css flexbox to align divs horizontally. Please see updated screenshot…
On both footer areas, I need these divs to be inline with one another. You can kind of tell in the footer widget area how the social icons look a little bit lower than the others. The “Contact Us” widget looks a little high. On the bottom footer, I was able to get the content div to align to the left and the nav div to align to the right, now I just want them to be inline with one another.

I am sorry to keep asking for help. I’m trying out different properties, I’m just not getting it right. I’m so close to being done and css flexbox seems like the way to go. I appreciate the help.

#6

Hi there,

Please add this in the Global CSS:

.x-colophon.top .x-column:nth-child(3) a {
    line-height: 0;
}

footer.x-colophon.bottom .x-container.max.width .x-colophon-content {
    float: left;
    margin-top: 10px;
}

footer.x-colophon.bottom .x-container.max.width .x-nav {
    float: right;
}

Hope this helps.

#7

That did help! I did notice there’s more space below the 2nd and 3rd widgets. I really like where my first widget (logo) is sitting. How would I get them to have equal top & bottom margin around each widget? Please see screenshot…I also noticed that when I reduced my browser down to mobile width, everything was responsive, except for the footer widgets. Here’s a screenshot… Is there a way to fix this within theme options or will I need to add special css?

I really appreciate the help!

#8

Hi There @burnich

Please add the following CSS rule to adjust the top margin of those two widgets.

.x-colophon.top .widget_text {
    margin-top: 25px !important;
}

For the mobile display issue, try adding the following CSS rule.

@media(max-width:480px){
  footer.x-colophon.top .x-container {
    display: grid;
  }
}

Hope that helps.

#9

Both codes did the trick, thanks! I just went to the website on my phone and the social media icons are stacked on top of each other instead of in a row. Here’s a screenshot…
Do you know what css I need to add to get these social media icons to line up horizontally and not vertically?

#10

Hi again,

Please replace this code:

@media(max-width:480px){
  footer.x-colophon.top .x-container {
    display: grid;
  }
}

With this:

@media screen and (max-width:480px){
  footer.x-colophon.top .x-container {
    display: block;
  }
   footer.x-colophon.top .textwidget br {
    display: none;
  }
  footer.x-colophon.top .textwidget a {
    display: inline-block;
  }
}

Let us know how this goes!

#11

It didn’t help :frowning: Please see screenshot…
It seems to have gotten worse. I tried to revert back to the:

@media(max-width:480px){
footer.x-colophon.top .x-container {
display: grid;
}
}

But it didn’t improve, just stayed the same. I viewed on chrome and safari. Do the footer widgets usually act responsive? It’s weird this is the only part of the site that doesn’t respond to mobile automatically. I wonder if I messed up somewhere down the line to make it this way. Any help resolving the issue is very much appreciated.

#12

Hi There,

Please find this custom CSS:

footer.x-colophon.top .x-container {
    display: flex;
    justify-content: center;
}

And change to this:

footer.x-colophon.top .x-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
}

Let us know how it goes!

#13

That did the trick! Thank you guys so much.

#14

You’re so much welcome!

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.