Home Forums Weaver Xtreme Theme Footer Widgets on First Row Not Aligned Properly

Viewing 16 posts - 1 through 16 (of 21 total)
  • Author
    Posts
  • #70793
    GR8FL
    Participant

    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/

    #70796
    Weaver
    Keymaster

    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.

    #70798
    GR8FL
    Participant

    What would I put where? In the global css?

    #70800
    scrambler
    Moderator

    Change the width from 31% to 31.3%

    #70801
    GR8FL
    Participant

    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.

    #70803
    scrambler
    Moderator

    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%

    #70805
    GR8FL
    Participant

    It’s still not right.

    #70807
    GR8FL
    Participant

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

    #70808
    hkp
    Participant

    @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.

    #70811
    scrambler
    Moderator

    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?

    #70813
    scrambler
    Moderator

    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;}

     

    #70814
    GR8FL
    Participant

    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.

    #70815
    scrambler
    Moderator

    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;}

    #70817
    GR8FL
    Participant

    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.

    #70820
    scrambler
    Moderator

    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

    #70821
    GR8FL
    Participant

    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?

Viewing 16 posts - 1 through 16 (of 21 total)
  • You must be logged in to reply to this topic.