Archived topic

change text-align property in one of 4 footer widgets

8 replies · Started by Ron on April 20, 2020

Viewing posts 1–9 of 9

April 20, 2020 at 7:58 pm #1247378

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

April 21, 2020 at 5:44 am #1247763

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/

April 21, 2020 at 9:55 am #1248244

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

April 21, 2020 at 10:04 am #1248258

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

April 22, 2020 at 1:59 am #1248900

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

April 22, 2020 at 7:51 pm #1250273

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

April 23, 2020 at 1:59 am #1250692

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

April 23, 2020 at 10:18 pm #1252562

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

April 24, 2020 at 2:38 am #1252897

Glad to be of help. Happy gardening :)

This archived topic is closed to new replies.

Start building better websites today.