【发布时间】：2017-11-06 04:23:53
【问题描述】：
我在 joomla 中创建了一个自定义模块，用于在我当前工作的网站的主页上显示一个画廊：http://www.francescaleso.com/it/
问题是我的媒体查询仅适用于纵向模式的桌面或小型移动设备。
对于处于横向模式的 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 列用于其他视图，例如桌面版。
我怎样才能做到这一点？
有没有其他方法可以让描述 div 覆盖整个图像区域而不设置定义的宽度和高度？这似乎是无法正常工作的东西......
感谢您的关注，这真的是一个很棒的社区！
【问题讨论】：
-
寻求帮助的问题（“为什么此代码不起作用或如何使该代码起作用？”）必须包括所需的行为、特定问题或错误以及在问题本身中重现它所必需的最短代码。没有明确的问题陈述的问题对其他读者没有用处。请参阅：How to create a Minimal, Complete, and Verifiable example。
标签： css joomla responsive-design grid