i have problem with this 3 column layout. I have tried something but it went wrong. Can you help me please with this. I dont know what to do anymore. I will be so happy if you can help.There is so big gaps between adress and opening time also i dont know how to move more days and opening time to the right. Now its not clear and its messy. Example: https://i.stack.imgur.com/MSvH7.png
my code:
<div class="container">
<div class="columnn">
<p>
Ruckholt Road 28</br>
Leyton London</br>
United Kingdom</br>
</p>
</div>
<div class="columnn">
<p>
Monday</br>
Tuesday</br>
Wednesday</br>
Thursday</br>
Friday</br>
Saturday</br>
Sunday</br>
</p>
</div>
<div class="columnn">
<p>
11:00 - 15:30</br>
12:00 - 18:00</br>
Closed</br>
12:00 - 18:00</br>
11:00 - 14:30</br>
Closed</br>
Closed</br>
</p>
</div>
</div>
.columnn {
flex: 33.33%;
padding: 0px;
margin: 0px;
}
.container {
font-size: 20px;
text-align: center;
margin: 0 30%;
display: flex;
}
I didn't fully understand your question but perhaps something like this?
https://codepen.io/i-empty/pen/abEejeQ?editors=1100
<div class="container">
<div class="columnn">
<p>
Ruckholt Road 28</br>
Leyton London</br>
United Kingdom</br>
</p>
</div>
<div class="columnn">
<h3> Opening Hours </h3>
<p>
Monday</br>
Tuesday</br>
Wednesday</br>
Thursday</br>
Friday</br>
Saturday</br>
Sunday</br>
</p>
</div>
<div class="columnn">
<p>
11:00 - 15:30</br>
12:00 - 18:00</br>
Closed</br>
12:00 - 18:00</br>
11:00 - 14:30</br>
Closed</br>
Closed</br>
</p>
</div>
</div>
.container {
border: 1px solid blue;
font-size: 20px;
text-align: left;
margin: 0 30%;
display: flex;
align-items: center;
}
.columnn {
flex: 33.33%;
padding: 0px;
margin: 0px;
border: 1px solid red;
&:last-child {
margin: 9% 0 0 0;
text-align: right;
}
}
You can try :
.container{
display: flex;
justify-content: space-evenly;
}
An example below :
body{
background: #d54343;
color: white;
}
.container{
display: flex;
justify-content: space-evenly;
}
.column{
display: flex;
}
.opening{
position: absolute;
}
.col-2{
margin-right: 40px;
font-weight: bold;
}
.col-3{
margin-top: 45px;
}<body>
<div class="container">
<div class="col-1">
<h3>Contact info</h3>
<p>
Ruckholt Road 28</br>
Leyton London</br>
United Kingdom</br>
</p>
</div>
<div class="column">
<div class="col-2">
<h3>Opening</h3>
<p>
Monday</br>
Tuesday</br>
Wednesday</br>
Thursday</br>
Friday</br>
Saturday</br>
Sunday</br>
</p>
</div>
<div class="col-3">
<p>
11:00 - 15:30</br>
12:00 - 18:00</br>
Closed</br>
12:00 - 18:00</br>
11:00 - 14:30</br>
Closed</br>
Closed</br>
</p>
</div>
</div>
</div>
</body>Maybe something like this?? This is base on your code provided. Let me know
.columnn {
padding: 0px;
margin: 0px;
}
.col-2 {
display: flex;
justify-content:space-evenly;
grid-gap:20px;
}
.col-1 {
display: grid;
}
.container {
font-size: 20px;
text-align: left;
margin: 0 auto;
display: flex;
justify-content:space-evenly;
}<div class="container">
<div class="columnn">
<h2> Contact Information </h2>
<div class="col-1">
<p>
Ruckholt Road 28<br>
Leyton London<br>
United Kingdom
</p>
</div>
</div>
<div>
<h2> Hours Open </h2>
<div class="col-2">
<p>
Monday<br>
Tuesday<br>
Wednesday<br>
Thursday<br>
Friday<br>
Saturday<br>
Sunday
</p>
<p>
11:00 - 15:30<br>
12:00 - 18:00<br>
Closed<br>
12:00 - 18:00<br>
11:00 - 14:30<br>
Closed<br>
Closed
</p>
</div>
</div>
</div>