Trying to center opening hours on footer underneath navigation

Marketing Nikakis 0
Viewed 30

I am attempting to have our opening days aligned to the left and our hours aligned to the right but sit in the center of our navigation bar. I am using squarespace. Currently I have it like this but not sufficiently close and on the mobile version it looks silly, any help would be appreciated thanks.

HTML Code Block:

    <center>
<div class="contactfield">
<div class="contact">
<div class="date">Mon-Wed</div><div class="time">5PM - 11PM</div> 
<div class="date">Thu</div><div class="time">12PM - 11PM</div> 
<div class="date">Fri-Sat</div><div class="time">12PM - 1AM</div>
  <div class="date">Sun</div><div class="time">12PM - 11PM</div>
  </div></center>
 <center> <span><img class=“sm_icons“ src="https://static1.squarespace.com/static/615e86638bf80f2683975e8f/t/630ff2cac2a9b76708e4df5d/1661989587824/phone.png" width= 12px ></span> <a href="tel:03-8591-3000">03 8591 3000</a>
 <div class="smaller"><a href="mailto:hello@trinitystkilda.com">hello@trinitystkilda.com</a></div>
  </center>

CSS:

p.smaller {
    line-height: 0px;
}
p.smaller{
    margin-top:-25px;
}
.navbar{
  text-align:center;
  .header-nav-list{
    width: 100%;
    max-width:800px;
    margin:0 auto;
    justify-content:space-evenly;
  }
}
p.contact {
    line-height: 0px;
}
p.contact{
    margin-top:0px;
 }
.contact .date{
  font-size: 14px;
  width:30%;
  display:inline-block;
  box-sizing:border-box;
  text-align:left;
  }
.contact .time{
  font-size: 14px;
  text-align:right;
  padding-right:10px;
  width:70%;
  display:inline-block;
  box-sizing:border-box;
  }
p.email {
    line-height: 0px;
}
p.email{
    margin-top:5px;
   color: white;
}

Images: Mobile Web

squarespace media-queries css html
1 Answers

Just give your date & time class with some wrapper (Heres I gave wrapper with class name .date-time), and use flex to make the child center.

.contact {
  display: flex;
  flex-direction: column;;
}
.date-time {
  display: flex;
  justify-content: space-around;
}
.date, .time {
  width: 50%;
  text-align: center;
}
<div class="contact">
  <div class="date-time">
    <div class="date">Mon-Wed</div>
    <div class="time">5PM - 11PM</div> 
  </div>
  <div class="date-time">
    <div class="date">Thu</div>
    <div class="time">12PM - 11PM</div> 
  </div>
  <div class="date-time">
    <div class="date">Fri-Sat</div>
    <div class="time">12PM - 1AM</div>
  </div>
  <div class="date-time">
    <div class="date">Sun</div>
    <div class="time">12PM - 11PM</div>
  </div>
</div>

Leonardo Doherty0
Related