Docs

[Super]

For some reason my widgets are all displaying vertically in the left column and not horizontally.
How can I fix this?

[Super]

This reply has been marked as private.

[Super]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in! It’s showing vertically because you have placed all the widgets within same widget area (Footer 1). Let’s place some within Footer 2, 3, 4 as well.

To remove the white background, you can add this under Custom > CSS in the Customizer.

.x-colophon .widget ul li {
  background-color: transparent;
}

Hope this helps.

[Super]

Thank you.

Also:
1) How do I style the widget headings?
2) How do I remove the lines inbetween the items on each widget?
3) How do I adjust the spacing between each widget?

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

/* style widget headings */
.x-colophon.top .h-widget {
    font-family: "Open Sans",sans-serif;
    font-style: normal;
    font-weight: 800;
    margin: 0 0 0.65em;
    font-size: 170%;
    line-height: 1.1;
    letter-spacing: 0.03em;
}

/* remove lines*/
.x-colophon.top .widget ul li {
    border-bottom: 0;
}

.x-colophon.top .widget ul {
    border-top: 0;
}

/* adjust width and spacing */
.x-colophon.top .x-column.x-1-4 {
    width: 22%;
}

.x-colophon.top .x-column {  
    margin-right: 4%;
}

You may change the values to achieve your desired look.

Hope that helps

[Super]

this is great.
Thank you.

1) The lines are still there on the site links though. Can we remove these too?

2) Also how can I style the text and links under each widget?

[Super]

I’ve actually removed the site links section, so dont worry about that.
Would be good to know how to style the text and the links underneath each header

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

/* footer links */
.x-colophon.top li a {
    font-family: "Open Sans",sans-serif;
    color:white;
}
/* footer text */
.x-colophon.top .widget {
    font-family: "Open Sans",sans-serif;
    color:white;
}

You may change white to any color you like.

Thanks

[Super]

Thank you.

I’ve added the following code but when I increase the font size more than 100% it makes the both the content text AND headers bigger.
I want to make the text and links bigger but not the widget headers.

/* footer text */
.x-colophon.top .widget {
font-family: “Open Sans”,sans-serif;
font-style: normal;
font-weight: 600;
margin: 0 0 0.65em;
font-size: 100%;
letter-spacing: 0.03em;
color:white;
}

[Jade]

Hi there,

Please use this code:

.x-colophon li a {
    font-size: 105%;
}

Hope this helps.

[Super]

Thanks Jade.
This doesnt change the size of the text underneath the Social heading.
“Facebook
Instagram
Twitter”

Is there a seperate code for this?

[Friech]

Hi There,

Use this css code for those text

#text-2 .textwidget p {
	font-size: 120%;
}

Cheers!

[Super]

Thank you so much.
Your support on this forum is outstanding.

Keep up the good work

[Friech]

We’re delighted to assist you with this.

Cheers!

[Author]

Posts