Extending Text in Widget to Span Remainder of Footer

mecfuels · Member · Oct 27, 2016 at 2:00 pm
Copy link

Add topic to favorites
Hello everyone,

I have a footer with two widget-areas. The first is a company contact information and the second with a disclaimer. The text of the disclaimer is within that widget-area.

The two widget-areas do not take up the entire footer, however I need the disclaimer text (or the widget-area) to span the remainder of the footer.

So far, I have been able to do this by setting a widget of the text to some % > 100%. However, upon shrinking the browser screen the two widget-areas become their own rows and do span the entire width of the footer (thus rendering the disclaimer text to be beyond the width of the footer).

I believe the simplest solution would be to use flex-box but that doesn’t seem to be registering in the CSS Customization. Additionally, selecting children does not seem to work.

I’ve spent a few hours on this and the live chat support was not able to come up with a solution as well. I am a beginning developer and a WordPress novice.

Unfortunately, I can’t insert a screenshot so let me know if I need to clarify.

Thank you so much!
thesacredpath · Member · Oct 28, 2016 at 7:40 am
Copy link
Hi, each footer widget area has a width of 30% before the footer widget area goes to a single column on 799px and narrower screen/windows. First off, we can use the nth-child pseudo selector to target just that second footer widget area (the center on) and double the width to 60%. To keep that change from affecting things on screens narrower than 800px, we can wrap that change in a Media Query and limit it to screens 800px and wider.
```
@media screen and (min-width: 800px) {
.site-footer .widget-area:nth-child(2n) {
    width: 60%;
}
}
```
mecfuels · Member · Oct 30, 2016 at 5:58 pm
Copy link
Thank you very much, it worked like a charm! I was not previously aware of @media screen so I will look into that for any future CSS revisions.

I appreciate your time and assistance.
thesacredpath · Member · Oct 31, 2016 at 5:27 pm
Copy link
Hooray and you are welcome. Let us know if you have additional questions or problems. :)

No items found.