Footer padding and widget width

[ArcaneE]

Hello,

My site is http://jgq.24c.myftpupload.com/

On the top footer, I would like to

• have my widgets 25% - 50% - 25%.
  Fist widget: Align left
  Middle widget : aling center
  Left widget: align right
  (they are all text widgets)

I also would like my hover color to be customized.

Finally, I would like to remove the top and bottom padding.

Thank you for your help!

Nathalie P.

[Prasant]

Hello @ArcaneE,

Thanks for asking.

On the top widget area I don’t see any widgets there. Have you removed the widgets? Please add them again, so that we can give you the proper CSS code.

Thanks.

[ArcaneE]

Hello,

That’s right, I don’t have any widget in the top, I was referring to the widget in the (top) Footer!

Thank you!

[ruenel]

Hi There,

Thank you for the clarifications.

Do you want something like this?

Screenshot

If that is the case, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-colophon.top .x-column.x-md.x-1-3 {
    width: 22%;
    text-align: left;
}

.x-colophon.top .x-column.x-md.x-1-3:nth-child(2) {
    width: 48%;
    text-align: center;
}

.x-colophon.top .x-column.x-md.x-1-3.last {
    text-align: right;
}

We would loved to know if this has work for you. Thank you.

[ArcaneE]

Excellent! Thank you.

If you could help me with the hover color and reduce the top and bottom padding, it would be awesome.

Thanks for your quick reply,

Nathalie

[basanta]

Hi There,

To reduce the top and bottom padding please use this CSS.

.x-colophon.top {
padding: 20px 0px !important;
}

you can adjust is further.

Regarding the hover color. Not sure for which element you need hover effect.
If you are talking about the text, I don’t see any link to it. You can add the anchor tag to the text and this CSS.

.x-colophon.top .x-column.x-md.x-1-3:nth-child(2)  a:hover {
   color: #ccc;
}

You can change the color code.

Thanks