WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Have 1 footer widget, the width of the entire page in Twentyeleven (9 posts)

  1. kubegusa
    Member
    Posted 1 year ago #

    Hi

    I want to have 1 footer widget in my Twentyeleven child theme that is the width of the entire page, and then I want the text I add to be centered.
    My link is http://www.route32.be/demaeyer/

    What I've done now, is add my text in the 2nd footer area widget. But as you can see, the width is limited and consequently the text is cut off where it should not be cut off.

    This is what I tried but I didn't see any changes as a result of this:

    /* Two Footer Widget Areas */
    #supplementary.two .widget-area {
    float: left;
    margin-right: 3.7%;
    width: 48.1%;
    }
    #supplementary.two .widget-area + .widget-area {
    margin-right: 0;
    }

    /* Three Footer Widget Areas */
    #supplementary.three .widget-area {
    float: left;
    margin-right: 3.7%;
    width: 90%;
    }
    #supplementary.three .widget-area + .widget-area + .widget-area {
    margin-right: 0;
    }

    Any other workaround that gets me this result is also good of course. Making 1 large footer area widget is the poetry that came to me.

    Thanks!
    Leila

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Fix your child theme first per your other thread.

  3. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Your footer code also has errors - "align" is deprecated and you can't put a span inside a p tag.

  4. kubegusa
    Member
    Posted 1 year ago #

    I corrected my child style.css and now only have the changed code in it.

    What do you mean with the errors in the footer code..? Do you mean that I need to add the formatting to the css rather than in the widget in the UI of my theme? If that's what you mean, I was going to change that at a later point, was still looking for the right place to add that formatting.

    Thanks for that suggestion. I don't see how it affects my question about the width of the widget though, or how could it be related..?

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    The footer displays exactly how it is coded in the HTML:

    <p align="center" style="font-size:70%;" span="">DE MAEYER & CO.</p>
    <p align="center" style="font-size:70%;" span="">MARINE & CARGO SURVEYORS</p>
    <p align="center" style="font-size:70%;" span="">BALLAERTSTRAAT 71</p>
    <p align="center" style="font-size:70%;" span="">2018 ANTWERPEN - BELGIUM</p>
    <p align="center" style="font-size:70%;" span="">TEL. 0032.3.232.76.77</p>
    <p align="center" style="font-size:70%;" span="">FAX 0032.3.232.24.57</p>
    <p align="center" style="font-size:70%;" span="">E-MAIL OFFICE@DEMAEYER-CO.BE</p>
    <p align="center" style="font-size:70%;" span="">SINCE 1993</p>
    <p align="center" style="font-size:70%;" span="">ACCREDITED BY THE BELGIAN MINISTRY OF </p>
    <p align="center" style="font-size:70%;" span="">FINANCE FOR EXCISE DUTY GOODS</p>
    <p align="center" style="font-size:70%;" span="">REGISTERED WITH THE ANTWERP COURT OF </p>
    <p align="center" style="font-size:70%;" span="">COMMERCE</p>
    <p align="center" style="font-size:70%;" span="">ARBITRATORS</p>
    <p align="center" style="font-size:70%;" span="">SHERLOG SDT LICENSED</p>
    <p align="center" style="font-size:70%;" span="">CIVIL LIABILITY INSURED WITH ITIC</p>
    <p align="center" style="font-size:70%;" span="">MOBILE FRANK DE MAEYER : 0032.495/23.41.23</p>
    <p align="center" style="font-size:70%;" span="">MOBILE MICHAEL DE MAEYER : 0032.495/53.36.48</p>

    There is no CSS restricting the width. The errors are that "align" is deprecated -- you should use "text-align" in the external stylesheet instead. And each of the above HTML lines contains span="" which should not be there!

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Try using this CSS to center the text:

    #colophon #second .textwidget p {
       text-align: center;
    }
  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    Also remove span="" from your HTML elements.

  8. kubegusa
    Member
    Posted 1 year ago #

    Worked like a charm. Thank you so much for your help!!

  9. kubegusa
    Member
    Posted 1 year ago #

    solved

Topic Closed

This topic has been closed to new replies.

About this Topic