My div has the following CSS rules:
#slogan{
font-size:24px;
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
The last four styles are used to center the content in the div on the page.
However, if the page size increases beyond a certain point, I want to switch to a different set of styles, like this:
@media only screen and (min-width: 941px){
#slogan {
font-size: 24px;
position: absolute;
min-width: 810px;
text-align: right;
}
}
This second set of styles is designed to display the content at a specific distance from the left edge of the page. While testing these styles in the F12 developer tools, they appear correct. However, when I apply the styles in the CSS file, the margins and alignment properties still affect the element, and I'm unsure how to override them since there is no default value for margin.
Can anyone provide assistance?