Ilona Takácsová Ilona Takácsová - 2 months ago 11
CSS Question

How to code opening hours to show in nice alignment?

I've created a website here and in the

Kontakt
section I added opening hours but I couldn't figure out how to code it for the days to align nicely and the other information also.

so I just put a
PNG
there to simulate the look I was looking for.

Nevertheless I would like to know how to code it properly because when I view it on a bigger screen or on a tablet device it messes with the bracket it's in because it isn't even with the bracket next to it.

The following code is the code from the left bracket where the text is, and it's working perfectly but I don't know how to code opening hours correctly.

<section id="blog-area">
<div class="container">
<div class="row text-center inner">
<div class="col-sm-6">
<div class="blog-content"><br><br>

<h2 class="feature-content-title green-text">+ 421 903 977 345</h2>

<p><strong>Iľja Takács</strong><br><br>

iljatakacs@gmail.com<br>
facebook @lakovnaturen<br><br>
Tureň 390, 903 01 Senec | Areál bývalého PD Tureň</p><br>


</div>
</div>


Link to the png image: http://testinglakovna.borec.cz/img/otvaraciehodiny.png

Answer

I suggest that you make a table. This way you can define every width to the pixel and make sure everything is aligned the way you displayed on the website.

I made a simple JSFiddle hope that helps.

<table class="tg">
  <tr>
    <td class="day">Po</td>
    <td class="time">09.00</td>
    <td class="sign">-</td>
    <td class="time">20.00</td>
  </tr>
  <tr>
    <td class="day">Ut</td>
    <td class="time">09.00</td>
    <td class="sign">-</td>
    <td class="time">20.00</td>
  </tr>
  <tr>
    <td class="day">St</td>
    <td class="time">09.00</td>
    <td class="sign">-</td>
    <td class="time">20.00</td>
  </tr>
  <tr>
    <td class="day">St</td>
    <td class="time">09.00</td>
    <td class="sign">-</td>
    <td class="time">20.00</td>
  </tr>
  <tr>
    <td class="day">Pia</td>
    <td class="time">09.00</td>
    <td class="sign">-</td>
    <td class="time">20.00</td>
  </tr>
  <tr>
    <td class="day">So</td>
    <td class="time">09.00</td>
    <td class="sign">-</td>
    <td class="time">20.00</td>
  </tr>
  <tr>
    <td class="day">Ne</td>
    <td class="extra" colspan="3">Na objednavku</td>
  </tr>
</table>

Jsfiddle