I'm struggling with my media queries and customizing a purchased responsive WordPress theme.
As the design reacts differently to various screen widths, I find myself using overlapping media queries for adjustments when issues arise.
Instead of having a clear sequence of media query sizes, I have a jumbled mess that complicates things further.
In my CSS, you can see how complex it has become:
@media only screen and (max-width: 961px) {
/* up to 961px */
@media only screen and (min-width: 885px) and (max-width: 961px) {
/* 885px up to 961px */
@media only screen and (min-width: 768px) and (max-width: 884px) {
/* 768px up to 884px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
/* up to 767px */
@media only screen and (max-width: 550px) {
/* Resizes top nav text for smaller screens*/
@media only screen and (min-width: 481px) and (max-width: 550px) {
/* Adjusts location of search bar */
@media only screen and (max-width: 565px) {
/* Toggles Justified Image Grid for home page buttons */
@media only screen and (min-width: 566px) and (max-width: 721px) {
/* Toggles Justified Image Grid for home page buttons */
@media only screen and (min-width: 722px) and (max-width: 902px) {
/* Toggles Justified Image Grid for home page buttons */
@media only screen and (min-width: 903px) {
/* Toggles Justified Image Grid for home page buttons */
It's quite messy, right? I'm still learning, so please bear with me :)
The main issue now is that despite defining specific queries for the Justified Image Grid, they are not behaving as expected. Could the problem be related to the complexity of other queries, even if they don't mention the image grid?
I'm open to suggestions on managing queries in these situations, common in web development projects...
EDIT: Here is the test page link: I want to display only one image grid element at a time.
Thanks! Jon