我一直在使用一个html主题,刚刚注意到有几个图片在移动的尺寸下消失了(在桌面上显示很好)。这是一个完整的半页文本的部分,然后页面的另一半充满了图片。例如:你可以看到这个部分旁边的图像-猫和兔子的移动的指甲修剪。
https://amberpollypets.co.uk/mobile-nail-clipping-dogs.html
我认为有几种风格适用于图像:section-media,section-media-half,section-media-half-right,当我查看样式表时:style.css有几行代码用于这些样式。
我试着修改@media下的代码(最小宽度:992 px).section-media-half〉img {显示:无;}到{显示:block;}但是什么都没有改变。也许我需要以更小的屏幕尺寸为目标?
任何帮助都感激不尽
/* Media (BG) */
.section-media-bg > * {
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
width: 100%;
height: 100%;
position: absolute;
}
/* Media (Half) */
.section-media-half {
height: auto;
position: relative;
margin-bottom: 72px;
}
.section-media-half > * {
margin: 0;
padding: 0;
width: 100%;
display: block;
}
@media (min-width: 992px) {
.section-media-half {
margin: 0;
width: 50%;
height: 100%;
position: absolute;
}
.section-media-half-left {
left: 0;
right: auto;
}
.section-media-half-right {
left: auto;
right: 0;
}
.section-media-half > img {
display: none;
}
.section-media-half > .gmap-block,
.section-media-half > .gmap-block > .map {
height: 100% !important;
}
.section-media-half + .container {
max-width: 50%;
padding-left: 72px;
padding-right: 72px;
}
.section-media-half-left + .container {
margin-left: auto;
margin-right: 0;
}
.section-media-half-right + .container {
margin-left: 0;
margin-right: auto;
}
}
@media (min-width: 1400px) {
.section-media-half + .container {
padding-left: 108px;
padding-right: 108px;
}
}
1条答案
按热度按时间r3i60tvu1#
那些可爱的狗图像大小减少到一半的原因是这个代码
在.desktop-device .视差部分内
用此代码替换您的代码
或者你也可以把这个
还有密码。
希望这能有所帮助
额外信息:你的图片太大了,不利于搜索引擎优化,把你的图片从jpg格式转换成webp格式会提高你的网站速度