0
我創建了一個的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覆蓋整個圖像區域，而不需要設置定義的寬度和高度？這似乎是不能正常工作的東西...
感謝您的關注，這真是一個偉大的社區！
尋求幫助的問題（「**爲什麼不是，或者如何使這個代碼工作？」）必須包含所需的行爲，_specific問題或錯誤以及**必需的最短代碼** _ to在問題本身**中重現它**。沒有**明確問題陳述**的問題對其他讀者沒有用處。請參閱：[如何創建最小，完整和可驗證示例]（http://stackoverflow.com/help/mcve）。 – LGSon