Footer Outline

Support
#1

Hi,
can I adjust the Footer Widgets, so that I have the first widget taking up the space of 1 and 2?
The remaining 3 and 4 being normal sized (2/4 1/4 and 1/4)?
As I want to have a slightly longer text that I want to appear in the footer…

Thank you!

#2

Hello @mikireimann,

Thanks for asking. :slight_smile:

You can add following CSS under X > Launch > Options > CSS to change footer layout:

footer.x-colophon.top .x-column.x-md.x-1-4:first-child {
    width: 55%;
}

footer.x-colophon.top .x-column.x-md.x-1-4 {
    width: 15%;
    margin-right: 0;
}

Please let us know how it goes.

Thanks.

#3

Works beautifully!
Thank you!

Is there a way to remove the “>” in front of the title of the column. Right now it says

About

Thank you!

#4

Hi there,

Please try adding the following CSS rule also int your custom CSS area.

.x-colophon.top .widget_text .h-widget::before {
    content: "";
}

Hope that helps.

#5

it works, but now there is a space before the title. How can I remove it?

#6

Hi There,

Please update the above provided code as follows.

.x-colophon.top .widget_text .h-widget::before {
    content: "";
    padding-right: 0;
}

Hope that helps.

#7

Yes, perfect!! Thank you!

#8

You’re welcome.

#9

Hi! I just realized that the footer now on mobile shows up cutoff:

How can I fix this?
thank you!

#10

Hi There,

Upon checking, I could not replicate this issue on my mobile. On which browser and mobile that you’re having this issue? Also make sure to clear your browser cache and test.

Thanks!

#11

What do you mean, you could not replicate it? your picture looks like you could.
to be able to show the 3 columns I added this to the CSS

footer.x-colophon.top .x-column.x-md.x-1-4:first-child {
width: 55%;
}

footer.x-colophon.top .x-column.x-md.x-1-4 {
width: 22%;
margin-right: 0;

That is why on mobile it shows up like this.
If I remove it, it shows up fine on mobile (one column under another, but on desktop, its just 3 small columns and not one large and two small…)

What do I need to add, so that the mobile view ignores this?

#12

Hi again,

Please try replacing your code with the following code:

@media screen and (min-width: 980px) {
  footer.x-colophon.top .x-column.x-md.x-1-4:first-child {
      width: 55%;
  }

  footer.x-colophon.top .x-column.x-md.x-1-4 {
      width: 22%;
      margin-right: 0;
  }
}

Let us know how this goes!

#13

Works like a charm! Big thanks!!

#14

Glad it worked.

Cheers!

#15

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