Is there a way to align these 3 divs as follows: pickup on the left, phone in the middle, and delivery on the right? I've browsed through similar alignment issues on Stack Overflow, but none of the solutions seem to work for my specific code. It's crucial that these divs maintain their positions within a media query range of 600px-900px - meaning if the screen is currently at 600px and then resized to 900px, the divs should retain their original alignment.
Below is the HTML code:
<div class="shrinkTopBar">
<div class="phone">
<img src="images/pick_it.png" alt="Phone number" />
<h3>07917569024</h6>
</div>
<div class="pickup">
<img src="images/pick_it.png" alt="Pick it up" />
<div class="info">
<h6>Pickup: Yes</h6>
<p>Borehamwood, London</p>
</div>
</div>
<div class="delivery">
<img src="images/ship_it.png" alt="Deliver it" />
<div class="info">
<h6>Delivered: Yes</h6>
<p>£5.00</p>
</div>
</div>
</div>
This is the CSS:
.topBar .shrinkTopBar {
width: 80%;
margin: 0 auto;
margin-top: 30px;
text-align: center;
display: flex;
}
.topBar .phone {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 175px;
height: 40px;
}
.topBar .pickup {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 129px;
height: 40px;
}
.topBar .delivery {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 129px;
height: 40px;
}
Any assistance would be greatly appreciated!