Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Шаблоны (TPL) » Помогите увеличить размер картинки короткой новости на десткопе, а в адаптивной версии оставить без изменений?

Помогите увеличить размер картинки короткой новости на десткопе, а в адаптивной версии оставить без изменений?


     15.03.2017    Шаблоны (TPL), Стили (CSS)    323

вопрос
Помогите увеличить размер картинки короткой новости на десткопе, а в адаптивной версии оставить без изменений..
Ковырялся в 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>

Ответа пока нет


9 комментариев

Stasiq
Юзер

Stasiq - 15 марта 2017 07:17 -

Дайте ссылку на сайт

lixxdee
Юзер

lixxdee - 15 марта 2017 08:26 -

Stasiq, politdigest.ru

stopani
Юзер

stopani - 15 марта 2017 09:27 -

Пропиши для каждого размера параметры картинки какие нужны.

.short-img {
    height: 150px;
}

lixxdee
Юзер

lixxdee - 15 марта 2017 10:43 -

stopani,
Я прописывал, желаемый результат на десктопе получил, но вместе с этим увеличился размер картинки в мобильной версии сайта, а нужно чтобы она осталась без изменений. Что в этом случае делать?)

stopani
Юзер

stopani - 15 марта 2017 11:28 -

У мобильной версии шаблон смартфон так-то, при чем тут адаптивный. А если у вас адаптивный, то и вставляйте в адаптивный @media...Размер экрана

lixxdee
Юзер

lixxdee - 15 марта 2017 13:26 -

stopani,
Меня в адаптивном как раз-таки все устраивает. Только вот если я меняю размер картинки на десткопе, то она в адаптивной тоже меняется, а нужно чтобы не менялась, а оставалась как есть)

stopani
Юзер

stopani - 15 марта 2017 16:09 -

Ну так добавь стили которые я написал для адаптива (в @screen), а обычные сделай больше по высоте какой тебе надо

lixxdee
Юзер

lixxdee - 15 марта 2017 17:24 -

stopani,
Можешь поподробнее расписать? с движком неделю знаком, многое непонятно)

stopani
Юзер

stopani - 15 марта 2017 17:42 -

Я же не знаю для какого разрешения экрана тебе нужно оставить текущие стили. Добавь в @media мой код например в 950, а в общие стили поставь высоту height не 250 а 350 и увидишь изменения

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх