I have five different pages with the same footer and they all share one imported css file for the styling of their footers.
whats happening is that on only one page that has bootstrap applied to it it’s causing my footer content to get bunched together with no space between items where as my other pages have proper spacing that’s expected.
I have tried to use the inspect tool but there seems to be no specific rules overriding my spacings.
what i have tried:
i tried to move the css rules from the imported file to my main css file and then with a little bit of altering the rules such as applying display:flex and playing around with margins and spacing i managed to make it look more desirable but it doesnt seem like an efficient solution to me and it makes my code dirty and confusing.
any suggestions on what i should do instead to take care of this problem?
footer {
z-index: -2;
position: sticky;
bottom: 0;
color: #ddd;
direction: rtl;
}
#footer-info-section {
display: flex;
flex-flow: row-reverse wrap;
justify-content: space-around;
align-items: start;
}
.footer-info-containers {
width: 25%;
}<footer>
<div id="footer-info-section">
<div class="footer-info-containers">
<h5 class="footer-heading">x</h5>
<ul id="socials-list">
<li>
<a><img class="socials-icons" src="x"></a>
</li>
<li>
<a><img class="socials-icons" src="x"></a>
</li>
<li>
<a><img class="socials-icons" src="x"></a>
</li>
</ul>
</div>
<div class="footer-info-containers" id="hours-info">
<h5 class="footer-heading">x</h5>
</div>
<div class="footer-info-containers" id="contactus-info">
<h5 class="footer-heading">x</h5>
<table>
x
</table>
</div>
</div>
<iframe id="googlemap" src="x" width="600" height="200" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</footer>