Footer Widgets on First Row Not Aligned Properly

[GR8FL]

I am baffled how to get this right on the desktop.

I want the first footer widget to align left, the second to align center, and the third to align right.

I want it centered where it has Recent Posts
I want it aligned to the right where it has Hattie’s Plants.

I have tried all kinds of combinations in the footer widget area and the only thing working is the first widget is aligned left. It’s also the one with the biggest content (width wise).

Site: https://hattiesgarden.com/

[Weaver]

The left widget is in <aside id=”wp-forcast-2″ class=”several classes”>

The middle one is <aside id=”recent-posts-5″ …>

And the right one is <aside id=”custom_html-25″ …>

I haven’t tried to fix any of them, but you should be able to figure out the CSS rules for the aside ID to get whatever alignment you want.

[GR8FL]

What would I put where? In the global css?

[scrambler]

Change the width from 31% to 31.3%

[GR8FL]

That isn’t right either. I would like the 2nd column centered and the 3rd column flush right.

I’ve tried 31.33,31.33,31.33 and I’ve tried 33.3,33.3,33.3, 33.66, 33.66, 32.66.

[scrambler]

To do that you also need to remove the left margin on the first one and the right margin on the last one
Add the two rules below to do that

.page-id-8 .widget.content-3-col:nth-of-type(1) {margin-left:0 !important;}
.page-id-8 .widget.content-3-col:nth-of-type(3) {margin-right:0 !important;}

AND you need to change the width from 31% to 32%

[GR8FL]

It’s still not right.

[GR8FL]

I put it back to 40,40,20; until this can be figured out.

[hkp]

@GR8FL

In the past I achieved something similar by inserting a WP table into the footer and aligning the cells as needed.

However, as I recall, I first needed to clear the default margin and padding settings in the footer, to get full control of the table widths and heights etc..

I found that what worked on a page/ post, did not quite work in the footer, due to the default margin and padding settings.

Hope this helps till you get the columns working.

Regards.

[scrambler]

I dont follow what you are doing.

Are you setting the columns as three columns, or are you setting the columns with custom CSS, or are you setting the width with custom widget with?

[scrambler]

If you are using the HTML to setup the columns, then you would need the rules below

.page-id-8 .widget.content-3-col:nth-of-type(1) {margin-left:0 !important;}
.page-id-8 .widget.content-3-col:nth-of-type(3) {margin-right:0 !important;}

and change the value to 32% in YOUR existing rule below

.page-id-8 .widget.content-3-col {width: 32%;margin:1% !important; background:#DBE6E0; border: 2px solid#816687;border-radius:10px; padding-top:1%; padding-left:1%;padding-right:1%;position:relative; padding-bottom:60px;}

 

[GR8FL]

I am not using html to setup columns.

These are footer widgets for the entire site, not just the home page (page 8).

The first row should have the following.

Widget 1 – align left
Widget 2 – centered to the width of the footer width (not the text)
Widget 3 – float right

Second row is centered and that is fine. I don’t care even if the text is centered.

[scrambler]

I understood you were talking about the three boxes with Learn More

If you are speaking about the footer widgets they were already the way you wanted, but the issue is that the content in these widgets is aligned left and does fill the the whole space so you have empty space to the right of the content so it will never look symmetrical that way.

If you want the footer widgets to look symmetrical, the content in the middle one needs to be aligned center, and the content on the right one needs to be aligned right.

That could be done with the following rules

#recent-posts-5 {text-align:center;}

#custom_html-25 {text-align:right;}

[GR8FL]

I don’t want the content centered. I want the middle widget to be centered. I want the right widget to be at the right.

When I set up the footer widgets, I used
31.33,31.33,31.33 and 33.3,33.3,33.3 and 33.66, 33.66, 32.66

The middle widget is not centered this way. The right widget is over too far to the left.

I ended up using 40,40,20; for the first widget line. But that is just eyeballing it on my desktop and iPad.

[scrambler]

we are not communicating.

If you set the widget width to 1/3 or use 3 columns and then open the browser developer tool and select the HTML of each widget container, you will see the middle one IS centered and the right one IS aligned right.

BUT because of empty content it looks different.

Another way to visualize it, is to replace the content of each widget by an endless content of text that will fill the full widget are, that will allow you to visualize what I mean

[GR8FL]

The problem is the 3rd widget isn’t to the right. Maybe because there’s just a bullet list. How can I get the right widget to float right?

[Author]

Posts