Grid doesn’t work

Hi Ephrem Firew Asrat,
Thank you for reaching us out. The grid layout is not working because, a CSS code from other theme or plugin is overriding our style. Please add following CSS code in your the Customize >> Additional CSS to fix the conflict.

@media sceen and ( max-width: 992px ) {
	.atbd_content_active #directorist.atbd_wrapper .atbdp_column {
		max-width: 33.333333333333% !important;
	}
}

Thanks, @aazztech,

I added the custom CSS code, and it worked for the desktop view. But the first line of media screen CSS rule is not necessary to work. Maybe a theme problem. And sadly it caused the tablet and mobile view to shrink. So what is your suggestion?

I have also tried this

@media (max-width: 992px)
.atbd_content_active #directorist.atbd_wrapper .atbdp_column {
    width: 33.333333333333% !mportant;
}

@media (max-width: 767px)
.atbd_content_active #directorist.atbd_wrapper .atbdp_column {
    width: 50% !important;
}

@media (max-width: 575px)
.atbd_content_active #directorist.atbd_wrapper .atbdp_column {
    width: 100% !important;
}

But, it didn’t work.

Regards,

Hi,
Sorry for the inconvenience. Your CSS code above was almost correct, you just missed the curly braces from their parent selector. Here is the corrected CSS you can apply now in your themes Additional CSS menu.

@media ( min-width: 992px ) {
	.atbd_content_active #directorist.atbd_wrapper .atbdp_column {
		max-width: 33.333333333333% !important;
	}
}

@media (max-width: 767px) {
  .atbd_content_active #directorist.atbd_wrapper .atbdp_column {
    width: 50% !important;
  }
}

@media (max-width: 575px) {
  .atbd_content_active #directorist.atbd_wrapper .atbdp_column {
    width: 100% !important;
  }
}

Thanks.

Hi @aazztech,

Now it is working.

Thanks!