Struggling to find a solution as no similar case was discovered!!
To avoid adding a class name for each page, I am eager to utilize a generic class name as shown below:
<div id="news">
<div class="news column">content 1</div>
<div class="news column">content 2</div>
...
</div>
#news .news {
float: left;
width: 50%;
}
@media only screen and (max-width: 767px) {
.column {
clear: both;
width: 100%;
}
}
The default CSS remains intact, and the two solutions proposed are: 1- Use !important, however, not my preferred method! 2- Utilize the exact class name as specified in the original CSS which is "#news .news"
Do you have any alternative solutions in mind that can tackle this issue??
Many thanks in advance