Css 带有图像的自定义网格-响应问题

我在joomla中创建了一个自定义模块，用于在我当前工作的网站主页中显示图库：

问题是，我的媒体查询仅适用于桌面或小型移动设备，仅适用于纵向模式

对于处于横向模式的iPad和手机，它会把一切都搞砸

以下是代码，您也可以使用F12工具进行检查：

/* the container of the whole gallery, for desktop */
.home-container {
    padding-top: 5%;
    margin-bottom: -2%;
}

@media screen and (max-device-width: 990px) {
    .home-container {
        display: none;
}
}

/* the container of the whole gallery, for mobile devices */
.home-container-mobile {
    padding-top: 0%;
    margin-bottom: -2%;
    margin-top: -10%;
}

@media screen and (min-device-width: 990px) {
    .home-container-mobile {
        display: none;
}
}

/* the container of a single row of items in the gallery */

.grid-container {
    display: table;
    margin: 0 auto;
}

@media screen and (max-device-width: 990px) {
    .grid-container {
    width: 100%;
}
}

/* the gallery single item */

.grid {
    float: left;
    position: relative;
    border-radius: 50%;
    margin: 10px;
}

@media screen and (max-device-width: 990px) {
    .grid {
    width: 43%;
    float: left !important;
    position: relative;
    border-radius: 50%;
    margin: 10px;
}
}

/* the gallery single item image */

.grid img {
    border-radius: 50%;
    transition: .4s -webkit-filter linear;
}

.grid:hover img {
  filter: url(filters.svg#grayscale);
     /* Firefox 3.5+ */
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(1);
}


/* the gallery single item description */

.desc {
    /* display: block; */
    /* position: absolute; */
    left: 26%;
    width: 87%;
    height: 100%;
    top: 0%;
    left: 0%;
    border-radius: 50%;
}

.desc span {
width: 100%;
    height: 100%;
    text-align: center;
    margin-top: 37%;
    position: absolute;
    left: 0;
    bottom: 0%;
    font-size: 16px;
    opacity: 0;
    -webkit-transition: opacity .8s ease 50ms;
    transition: opacity .8s ease 50ms;
    -webkit-transition: background-color ease-in-out 200ms;
    transition: background-color .3s ease-in-out 200ms;
    color: #fff !important;
    border-radius: 50%;
}

@media screen and (max-device-width: 767px) {
    .desc span {
        opacity: 1;
        /* background: rgba(178,189,167,0.7) */
        /* first gradient darker - background: radial-gradient(rgba(72,67,67,0.644444) 20%, rgba(72,67,67,0.37) 77%) !important; */
        background: radial-gradient(rgba(72,67,67,0.444444) 20%, rgba(72,67,67,0.37) 34%) !important
}
}

@media only screen and
(min-device-width: 767px)
(max-device-width: 1025px){
    .desc span {
        width: 68% !important;
        opacity: 1;
        /* background: rgba(178,189,167,0.7) */
        /* first gradient darker - background: radial-gradient(rgba(72,67,67,0.644444) 20%, rgba(72,67,67,0.37) 77%) !important; */
        background: radial-gradient(rgba(72,67,67,0.444444) 20%, rgba(72,67,67,0.37) 34%) !important;
}
}

.grid:hover .desc span {
  opacity: 1;
    /* background: rgba(168,202,217,0.6); */
    /* background: rgba(186, 212, 106, 0.6); */
    /* background: rgba(201, 220, 135, 0.6); */
    /* background: rgba(197, 225, 165, 0.6); */
    /* background: rgba(230, 238, 156, 0.6); */
    background: rgba( 178, 189, 167, 0.7);
}

正如你所看到的，在这样的“中间”移动视图中，整个结构都搞砸了：我希望有2列用于移动电话的项目（我已经实现了），4列用于其他视图，比如桌面版本

我怎样才能做到这一点

有没有其他方法可以让description div覆盖整个图像区域而不设置定义的宽度和高度？这似乎是工作不正常的东西

---

谢谢你的关注，这真是一个伟大的社区

有两种方法可以实现你想要的

首先：为所有标准屏幕大小定义媒体查询，如

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

或任何CSS移动第一帧工作，如Bootstrap、基金会3、基金会等 只需添加css并使用网格布局即可轻松实现干净标准的布局。

寻求帮助的问题（“为什么此代码不起作用，或如何使其起作用？”）必须包括所需的行为、特定问题或错误以及在问题本身中重现此代码所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：。