Currently, I am facing an issue with aligning icons (images) under each title on a page that lists various classes. The icon needs to be centered below the title on both desktop and mobile versions of the site. However, I have encountered a problem where using margin-left: auto and margin-right: auto on mobile doesn't center the icon properly. If I try to adjust it by adding margin-left: 40px, it moves correctly on mobile but affects the alignment on the desktop version as well.
Below is the CSS code snippet:
.classicons1 {
margin-left: 45%;
padding: 5px;
width: 10%;
display: inline;
}
@media screen and (min-width: 880px) {
.classicons1 {
width: 7%;
padding: 5px;
display: inline;
margin-left: 0;
}
}
Despite trying various solutions within media queries, including resetting margins for different screen sizes, the issue persists. Inspecting the elements via Chrome's inspect mode highlights that the styles for mobile are being overridden by those for the desktop layout.