вопрос
Помогите увеличить размер картинки короткой новости на десткопе, а в адаптивной версии оставить без изменений..
Ковырялся в css, размер картинки удалось поменять, но вместе с ней меняется размер изображения и адаптивной версия сайта, а нужно чтобы она осталась без изменений.
скрин:
css:
shortstory.tpl:
Ковырялся в css, размер картинки удалось поменять, но вместе с ней меняется размер изображения и адаптивной версия сайта, а нужно чтобы она осталась без изменений.
скрин:
css:
/* SHORT STORY
----------------------------------------------- */
.short {border:1px solid #dddddd; margin-bottom:40px; position:relative;}
.short-img {height:150px; display:block;}
.short-img img {margin-top:-15%;}
.short-img:hover img {transform:scale(1.1,1.1);}
.short-cat {display:inline-block; padding:5px 10px; background-color:#FFF; text-transform:uppercase; font-weight:700;
position:absolute; left:20px; top:20px; max-width:380px;}
.short-text {padding:20px 30px;}
.short-text a {display:block;}
.short-desc {font:14px/21px Georgia, "Times New Roman", Times, serif;}
.short-meta {padding:0 30px 20px 30px;}
.short-meta span {display:inline-block; margin-right:30px; float:left;
color:#696969; font:italic 14px Georgia, "Times New Roman", Times, serif;}
.short-meta a {color:#696969;}
.short-meta a:hover {color:#06c;}
.short-tools {float:right; margin-right:-10px;}
.short-tools span {margin:0;}
.short2 {padding-left:220px; height:200px;}
.short2 .short-img {width:220px; height:200px; float:left; margin-left:-220px;}
.short2 .short-img img {margin:0 0 0 -20%; width:150%; max-width:150%;}
.short2 .short-cat {max-width:180px;}
.short2 .short-text {width:100%; float:right;}
.short2 .short-meta {position:absolute; left:220px; right:0; bottom:0;}
.short2 .short-desc {height:85px; overflow:hidden;}
.short3 .short-cat {position:static; padding:0; margin-bottom:20px; max-width:none;}/* ADAPTIVE
----------------------------------------------- */
.show-menu {display:none;}
@media screen and (max-width: 1320px) {
.wrap {padding:0;}
.main {border-radius:0;}
}
@media screen and (max-width: 1220px) {
.center {max-width:1000px;}
.social-btns {right:10px;}
.cols-r {padding:55px 325px 55px 10px;}
.cols-r .sidebar {width:325px; margin-right:-325px; padding-right:10px;}
.cols-r .content {padding-right:10px;}
.head-line {padding:10px 335px 0 10px;}
.action-btns {width:335px;}
.footer {padding:20px 10px;}
}
@media screen and (max-width: 950px) {
.center {max-width:768px;}
.menu-mob, .cols-r .sidebar {display:none;}
.cols-r {padding:10px;}
.cols-r .content {padding-right:0; float:none;}
.cols-r .sidebar {float:none; width:100%; margin-right:0; padding-right:0;}
.logotype {top:10px;}
.social-btns {right:50%; top:90px; margin-right:-70px;}
.head-line {padding:10px;}
.action-btns {width:auto; text-align:left;}
.short {margin-bottom:10px;}
.menu-footer, .copyr {text-align:center; width:100%; float:none;}
.show-menu {display:inline-block; line-height:40px; font-size:24px;}
.menu-mob {text-align:left; position:absolute; left:0; top:100%; width:100%; z-index:888;
background-color:#FFF; box-shadow:0 0 10px 0 rgba(0,0,0,0.2); padding:10px 0;}
.menu-mob > li {display:block; padding:0 10px;}
.menu-mob > li > a {line-height:30px;}
.hidden-menu {width:auto; display:block; position:static; margin:5px -10px;}
.hidden-menu li a {line-height:30px;}
.comm-item {padding:0 10px 15px 70px;}
.comm-right {padding-left:10px;}
.comm-author, .comm-date {font-size:12px;}
.form-wrap {margin:0 -10px;}
}
@media screen and (max-width: 760px) {
.short-img img {margin-top:-5%;}
.short2 .short-img img {margin:0 0 0 -20%;}
.short-text {padding:20px 10px;}
.short-meta {padding:0 10px 20px 10px;}
.short-meta span {margin-right:20px;}
.short-tools span {margin:0;}
.sidebox {margin-bottom:10px; padding:20px 10px;}
.pagi-nav {white-space:nowrap; overflow-y:hidden; overflow-x:auto;}
.full-text h2, .full-text h3, .full-text h4, .full-text h5 {font-size:18px; margin:10px 0;}
.add-comm-form {padding:20px 10px; overflow:hidden;}
.add-comm-form:before {display:none;}
.ac-submit {position:static; width:100%;}
.ac-submit button {width:100%;}
.comments-tree-list .comments-tree-list {padding-left:0 !important;}
.comm-bottom-info ul li, .mass_comments_action {display:none;}
.mob-vis {display:inline-block !important;}
.sub-title h1 {font-size:18px; line-height:24px;}
}
@media screen and (max-width: 590px) {
.short-img img {margin-top:0;}
.short2 {padding-left:0; height:auto;}
.short2 .short-img {width:100%; height:150px; float:none; margin-left:0;}
.short2 .short-img img {margin:0; width:100%; max-width:100%;}
.short2 .short-cat {max-width:280px;}
.short2 .short-text {float:none;}
.short2 .short-meta {position:static;}
.add-comm-form .login-social {position:static; text-align:left;}
.ac-inputs input {width:100%; float:none !important; margin-top:10px;}
.ac-protect {width:100%; float:none; margin:-10px 0 0 0;}
.ac-submit button {float:none; display:block; text-align:center; width:100%;}
.ui-dialog {width:100% !important;}
.upop-left, .upop-right {float:none !important; width:100% !important; margin:0; padding:0 20px;}
.upop-left {margin-bottom:10px; text-align:center;}
.ui-dialog-buttonset button {display:block; margin:0 0 5px 0; width:100%;}
#dofullsearch, #searchsuggestions span.seperator {display:none !important;}
.attach .download-link {margin:0 -15px 0 0; float:none; display:block; padding:0 10px;}
.attach-info {float:none;}
}
@media screen and (max-width: 470px) {
.logotype {width:320px; margin-left:-160px; background-image:none;}
.short .short-cat {max-width:260px;}
.full .short-cat {max-width:65%;}
.ac-protect {margin:-10px -10px 0 -10px;}
.comm-item {padding:0 10px 15px 50px;}
.comm-left {margin-left:-40px; width:40px; height:40px;}
.comm-author, .comm-date {margin:0; display:block; float:none;}
.comm-date {display:none;}
.login-social:before {display:block; line-height:30px; margin-right:0;}
}
shortstory.tpl:
{* Вид новостей меняется с помощью newscount. Настраивайте, как хотите. *}
<div class="short clearfix[newscount=2,5,8] short2[/newscount][newscount=3,6,9] short3[/newscount]">
[not-newscount=3,6,9]<a class="short-img img-box" href="{full-link}">
<img src="{image-1}" alt="{title}" />
<div class="short-cat nowrap">{category}</div>
</a>[/not-newscount]
<div class="short-text">
[newscount=3,6,9]<div class="short-cat">{category}</div>[/newscount]
<h2 class="title">[full-link]{title}[/full-link]</h2>
<div class="short-desc">
{short-story limit="300"}
</div>
</div>
<div class="short-meta icon-left clearfix">
<span><i class="fa fa-calendar-empty"></i>{date=d F, Y}</span>
<span>[com-link]<i class="fa fa-comment-empty"></i>{comments-num}[/com-link]</span>
<span>[full-link]<i class="fa fa-eye"></i>{views}[/full-link]</span>
[not-group=5]<div class="short-tools">
<span>[edit]<i class="fa fa-menu" title="Редактировать"></i>[/edit]</span>
<span>
[add-favorites]<i class="fa fa-star-empty" title="Добавить в закладки"></i>[/add-favorites]
[del-favorites]<i class="fa fa-star" title="Убрать из закладок"></i>[/del-favorites]
</span>
</div>[/not-group]
</div>
</div>
