Question

我的购买和销售网站：www.onlinecarbooty.com不具备移动响应能力。我已经设置了一个移动版本，虽然缩小到480像素宽度。无论如何，该网站有一个功能，通过点击它们放大照片。它使用了基本的NyroModal。它使用不同的NyroModal - NyromodalMobile.css在桌面站点和移动站点上工作正常。但是，当用户在移动设备上查看桌面版网站时，放大图片太小。我已经尝试过设置NyroMadalMobile2.css，如果它在桌面网站上检测到移动用户，该网站会使用该网站，但我不确定要更改哪些内容以显示更合适的放大...我只是只是学习编程，我有一个专业人士为我做了大部分事情，但目前在其他网站上有很多。如果有人可以帮助我调整下面的CSS文件，使扩大的图片在移动设备上看起来更好，我会很感激。如果您点击此页面上的待售商品，您可以看到我正在谈论的内容。http://www.onlinecarbooty.com/go-booting.aspx

问候，马克

.nyroModalBg {
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.7;
}

.nmReposition {
    position: absolute;
}

.nyroModalCloseButton {
    top: -13px;
    right: -13px;
    width: 32px;
    height: 32px;
    text-indent: -9999em;
    background: url(img/close.gif);
}

.nyroModalTitle {
    bottom: -31px;
    left: 0;
    margin: 0;
    font-size: 1.8em;
    color: #ffff00; width: 960px;
 }

.nyroModalCont {
    position: absolute;
    border: 4px solid #777;
    margin: 25px;
    background: #fff;
}

.nyroModalCont iframe {
    width: 960px;
    height: 800px;
}

.nyroModalError {
    border: 4px solid red;
    color: red;
    width: 250px;
    height: 250px;
}

.nyroModalError div {
    min-width: 0;
    min-height: 0;
    padding: 10px;
}

.nyroModalLink, 
.nyroModalDom, 
.nyroModalForm, 
.nyroModalFormFile {
    position: relative;
    padding: 10px;
    min-height: 960px;
    min-width: 960px;
    max-width: 960px;
}

.nyroModalImage, 
.nyroModalSwf, 
.nyroModalIframe, 
.nyroModalIframeForm {
    position: relative;
    overflow: hidden;
}

.nyroModalImage img {
    vertical-align: top;
}

.nyroModalHidden {
    left: -9999em;
    top: -9999em;
}

.nyroModalLoad {
    position: absolute;
    width: 100px;
    height: 100px;
    background: #fff url(img/ajaxLoader.gif) no-repeat center;
    padding: 0;
}

.nyroModalPrev, 
.nyroModalNext {
    outline: none;
    position: absolute;
    top: 0;
    height: 60%;
    width: 150px;
    min-height: 50px;
    max-height: 300px;
    cursor: pointer;
    text-indent: -9999em;
    background: transparent url('data:image/gif;base64,AAAA') left 50% no-repeat;
}

.nyroModalImage 
.nyroModalPrev, 
.nyroModalImage 
.nyroModalNext {
    height: 100%;
    width: 40%;
    max-height: none;
}

.nyroModalPrev {
    left: 0; background-image: url(img/prevmob.png);
}

.nyroModalPrev:hover{}
.nyroModalNext {
    right: 0;
    background-position: right 50%; background-image: url(img/nextmob.png);
}

.nyroModalNext:hover{}

Nyromodal - 在Mobile上的桌面站点上查看

0 个答案: