Footer Widgets and text

[Ozzy]

Hi,

I am trying to edit the width of the 4 widgets I’m using on the footer.
I would like to have the width around 60% of default one (100%)

I tried this CSS code, which does the trick on desktop, but the mobile version doesn’t look that great.

footer.x-colophon.top .x-column {
width: 13%;
}

Also, is there a way to make the footer text be the same as a normal paragraph (size and font family)?

Thank you

[thai]

Hi There,

Please try adding the following CSS under Customizer > Custom > Global CSS:

.x-colophon.top .x-container.max.width {
    width: 60%;
}

.x-colophon.top .textwidget {
    font-size: 1.071rem;
}

[Ozzy]

Hi,

Thank you for your reply,
That doesn’t did the trick.
I already have a “footer” there that is just a section. I want to real footer to look like that “fake” footer. Please have a look again to the home page.

The widget text width decrease but it was centred, instead of aligned to the left.
Also, the text that I want to look like the paragraph if from the real footer, not the widget. (the widget text is already paragraph size).

Cheers

[Joao]

Hi There,

The code provided by Thai seems correct. Unfortunately, the provided credentials do not seem to be working so we can test it, please check for CSS syntax mistakes like missing } on your media queries or missing; If you can´t find any error and the code still does not work, please provide working credentials so we can take a closer look.

Thank you

[Ozzy]

Hi João,

Maybe I was not clear.
In the homepage you can see two footers that look similar. The top one is a cornerstone section and the bottom one is an actual footer. I want to align the text widgets (footer) to the text on the top footer (section)
The code Thai gave me makes the widget width smaller (which is good), but it centred the widgets, and I want the align to the left.

The line of text I have in the bottom (footer) it’s a different font and size from the widget text (paragraph), and I want it to be a paragraph.

Thank you

[rad]

Hi there,

Those two footers are independent of each other, plus, it has a different number of columns in which perfect alignment can’t be achieved. Plus, it’s responsive which means dimension could change depending on the device, so even if you successfully alignment on your view, it will not be aligned with other views.

The solution would be setting fix width for all top footer columns, then apply same fix width on bottom footer’s columns. But that kills the purpose of responsive design.

Please try this one,

    .x-colophon.top {
    max-width: 1500px;
    width: 90%;
    margin: 0 auto;
    position: relative;
    }
.x-colophon.top:before {
position: absolute;
content:"";
display: block;
z-index:-1;
background: #ee8977;
top:0;
right: -100%;
left: -100%;
bottom: 0;
}

.x-colophon.top > .x-container{
margin:0;
max-width: 800px;
}

.x-colophon.top > .x-container .x-column {
padding-left: 10px;
}

Thanks.

[Ozzy]

Hi,

Thank you for the detailed reply.
I understand your concern and I agree with it.
If I could add a fifth widget that you be helpful. Is it possible?
Would this be possible to achieve with Pro? If yes, how risky it is to change to Pro in the middle of a process?

Cheers

[jade]

Hi there,

Adding a fifth widget would require you to do some theme customization which goes beyond the scope of our support.

You can check info about child theme’s here. Then you can override the file _footer-widget-areas.php which is in x/framework/legacy/cranium/footers/views/global/.

You can also achieve this with pro footer builder by adding 5 containers in a bar.

[Ozzy]

Thank you for your reply and suggestions, Jade.
I will choose the best option.

Just one question, how risky it is to change to Pro in the middle of the process?

Cheers

[ruenel]

Hello There,

Thanks for updating in! Pro theme is for intermediate and advanced users. With the Pro footer builder, you will be able to create your own footer design. In the process, you will have to be open to learn this new tool as this is way different from just using the default footer. It will always be hard to digest for the first time. As soon as you are familiar with the tool, you will be able to pull off what you want to have in for the footer.

Pro is another theme you will install and in this theme, it does not have the customizer manager and the demo content. You might need to change your settings or make sure that you have the same settings when you are using X. I would highly recommend that you do the changes in a staging site first to avoid any issue that might disrupt with your live site.

Hope this helps.