CSS clashes

propolis

Hi,

Testing my site for responsiveness accross various devices and using custom css i have the following issue:
With standard css in custom.css the site works - see home page image below:

Now you can see home page image is correct, but when I look at iPad landscape view, the image of the dog is not center below:

Now I add the following code:

@media (min-width: 768px) {
.acm-slideshow .item {
min-height:100%!important;
}
}

and the iPad image looks fine - see image below:

BUT, look and the site main image which has now reduced in height - see image below:

Eddie

saguaros

Hi Eddie,

I added the max-width in the media query:

@media (min-width: 768px) and (max-width: 1024px) {
  .acm-slideshow .item {
      min-height:100%!important;
  }
}

could you check it now?

propolis

saguaros

This now really looks and works well across devices.

Thank you very much for all the support from Joomlart and everyone who helped out.

Eddie :-)