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

[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

[David]

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/

[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

[Ron]

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

[David]

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

[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

[David]

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

[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

[David]

Glad to be of help. Happy gardening 🙂

[Author]

Posts