My CSS is working but how do I reduce the number of @media CSS codes (I feel some are unnecessary)?
.spandemo {
display: inline-block;
padding-left: 42%;
}
}
@media screen and (max-width: 600px) {
.spandemo {
display: inline-block;
padding-left: 1%;
}
}
.column {
width: 98%;
float: right;
}
}
.column img {
max-height: 129px;
height: 100%;
width: auto;
}
}
@media screen and (max-width: 600px) {
.column {
width: 90%;
float: right;
}
}
@media screen and (max-width: 600px) {
.column img {
max-height: 129px;
height: 70%;
width: 90%;
padding-right: 10px;
}
}
@media screen and (min-width: 600px) {
.column img {
max-height: 372px;
height: 70%;
width: 90%;
padding-right: 10px;
}
}<div class="row">
<div class="column">
<img class="responsive" src="https://picsum.photos/seed/left/200/300" style="width:50%" border="1" />
<img class="responsive" src="https://picsum.photos/seed/right/200/300" style="float:right; width:50%" border="1" />
<span style="float:left;"> Before</span>
<span class="spandemo" style="float:left;"> After</span>
</div>
</div>This is a follow up question to what I asked here: CSS working for mobile view but not wide screens
I added all the @media CSS codes to get the desired effects but I think some are unnecessary if used in the correct order. Please let me know what can be removed or edited.
2
Answers
A few tips:
1.) You don’t need to repeat the exact same
@mediaquery multiple times, you can put multiple CSS rules inside a single query.2.) When the
@mediaquery is triggered, it just adds those styles to the rules that are already in place. So, for example, if an element hasfloat: right;you don’t need to addfloat: right;to the same element inside the@mediaquery.3.) In general it’s a good idea to write your CSS in a way so that no
@mediaqueries are needed at all for the smallest screen size. As the screen size gets larger add more@mediaqueries to override the previous styles. This means you should probably only use@media screen and (min-width: ____)values and not ones that targetmax-width. Especially important: don’t use **bothmin-widthandmax-widthqueries as this will get very confusing for you since they might overlapBelow is just a simple cleanup that removes the duplication I mentioned in those first 2 tips. I have not gone through and figured out how to implement #3 since you would probably know better than me for what you want here.
I cleaned up your repetitive codes. When you copy paste your code in the media query to change then you should compare and remove what CSS rules remains the same for different screens. Also there were 3 unnecessary curly brackets. Here is the cleaner version of your CSS codes: