[Resolved] change text-align property in one of 4 footer widgets

Home Forums Support change text-align property in one of 4 footer widgets

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1247378
    Ron

    Good Day Generatepress
    I have added a 4th footer to my website right now there is a short code to center all footer text
    The footer I added is for Hours of Operation
    I want the footer to look like something like this

    Sunday Closed
    Monday 10:00 AM-5:30 PM
    Tuesday 10:00 AM-5:30 PM
    Wednesday 10:00 AM-5:30 PM
    Thursday 10:00 AM-5:30 PM
    Friday 10:00 AM-5:30 PM
    Saturday Closed

    here is the widget code now

    <div>Sunday Closed</div>
    <div>Monday 10:00 AM-5:30 PM</div>
    <div>Tuesday 10:00 AM-5:30 PM</div>
    <div>Wednesday 10:00 AM-5:30 PM</div>
    <div>Thursday 10:00 AM-5:30 PM</div>
    <div>Friday 10:00 AM-5:30 PM</div>
    <div>Saturday Closed</div>

    works but I don’t like text centered
    as you can tell I don’t know much about CSS
    your help would be appreciated

    #1247763
    David
    Staff
    Customer Support

    Hi there,

    try adding this CSS to your site:

    .footer-widget-3 .custom-html-widget {
        text-align: left;
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    #1248244
    Ron

    David
    thanks for the code you provided it helped
    I have modified your code a little, but still not quite what i want

    .footer-widget-3 .custom-html-widget {
        text-align: left;  margin-left:95px; 

    I want it to look like days are in a column and time in a second column all left justified
    would I use white space when I try that my line space gets messy
    not sure how to use the column in CSS
    Thanks Ron

    #1248258
    Ron

    David
    I deleted the margin code
    had not checked what it looked like live
    Ron

    #1248900
    David
    Staff
    Customer Support

    You would need to change your HTML to something like this:

    <ul class="opening-times">
        <li>Sunday<span class="time">Closed</span></li>
        <li>Monday<span class="time">10:00 AM - 5:30 PM</span></li>
        <li>Tuesday<span class="time">10:00 AM - 5:30 PM</span></li>
        <li>Wednesday<span class="time">10:00 AM - 5:30 PM</span></li>
        <li>Thursday<span class="time">10:00 AM - 5:30 PM</span></li>
        <li>Friday<span class="time">10:00 AM - 5:30 PM</span></li>
        <li>Saturday<span class="time">Closed</span></li>
    </ul>

    And then add some CSS to space the time from the day.:

    .opening-times li {
        display: flex;
        justify-content: space-between;
    }
    #1250273
    Ron

    Thanks Dave
    worked great
    You and the other support staff at Generatepress are the Best
    what would it take to center the Closed in the class=”time” space in the Sunday & Saturday span tag
    Ron

    #1250692
    David
    Staff
    Customer Support

    Cool 🙂

    So for the Closed day we can add another class to the HTML eg.

    <li>Sunday<span class="time closed">Closed</span></li>

    Then this CSS to give the element a width to match those entries with a time, then the text can be centred within:

    .opening-times li .closed {
        min-width: 126px;
        text-align: center;
    }
    #1252562
    Ron

    David
    thanks for your help
    I should be done tinkering for a while (my garden needs my attention)
    Thanks for your expert assistance
    Ron

    #1252897
    David
    Staff
    Customer Support

    Glad to be of help. Happy gardening 🙂

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