hope this fix your issue As with all CSS, the second set of media queries will overwrite anything in the first if they're applicable to the same pixel widths. In your case, they are as the second set will also apply to screen-sizes under 480px. If you're looking for a quick fix, either put the max-width:468px second, or convert the latter to
@media only screen and (min-width: 481px) and (max-width :768px)
CSS media queries [how to transform to hyperlinks via media queries]
To fix this issue The first option would be better. You are only changing the property that changes across media-queries, rather than resetting all the properties. Duplication of styles is a code smell and can lead to unmaintainable css at larger scales.