Currently, I am focusing on enhancing the responsiveness of the footer section on my website. To achieve this, I have implemented a media query that triggers when the screen size is reduced to less than 992px. This allows the content within the footer to be centered. However, I faced a dilemma where I needed to remove the padding in order to center the content for smaller screens, but retain it for normal-sized footers. How can I override the padding: 0; to achieve this goal?
Below is the code snippet for the normal footer design:
.social-media {
margin-bottom: 50px;
> ul {
padding: 0;
list-style: none;
> li {
> a {
padding-right: 20px;
float: left;
color: #ffffff;
}
}
}
}
And here is the code snippet for the small footer design:
@media screen and (max-width: 992px) {
.social-media {
margin-bottom: 0;
height: auto;
width: auto;
> ul {
list-style: none;
text-align:center;
> li {
padding-left: 10px;
padding-right: 10px;
> a {}
}
}
}
}
Additionally, below is the code snippet for the bootstrap column used in the footer:
<div class="col-lg-3 offset-lg-6 social">
<div class="social-media">
<ul class="nav-items">
<li class="nav-item" :key="index" v-editable="item" v-for="(item, index) in $store.state.settings.footer_nav">
<LinkType class="nav-link" :link="item.link" :linkText="item.name">{{ item.name }}</LinkType>
</li>
</ul>
</div>
</div>
If anyone has any insights or solutions to my predicament, I would greatly appreciate the assistance as I have been grappling with this issue for some time now.