I am facing a peculiar issue. I have added a
to my div container with text on one side and images on the other. However, when I try changing the width using % (for example, width:5%), the flex behavior becomes strange and everything shifts to one end.d-flex justify-content-between container
At some point, when I change the width using vh, vw or px, it works fine. But I specifically need to use %. What should I do?
JSX:
<section className='footer-area'>
<div className='d-flex justify-content-between container'>
<div className='address'>
<h4><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b2304060e2b190e460d19020e050f071245080406">[email protected]</a></h4>
<h4>ארלוזרוב 11, רמת גן</h4>
</div>
<div className='mw-3 share '>
<img
src={facebookLogo}
className='img-fluid'
alt='Responsive image'
onClick={() =>
window.open(
"https://www.facebook.com/"
)
}
/>
<img
src={whatsappLogo}
className='img-fluid'
alt='Responsive image'
onClick={() => window.open("https://wa.me/+972505710373")}
/>
</div>
</div>
</section>
CSS:
.img-fluid {
margin: 2vh;
max-width: 10%;
height: auto;
}
The unusual footer display:
https://i.sstatic.net/5UkKi.png
Desired appearance: https://i.sstatic.net/FdVdL.png (achieved with vh but I require it in %)