Рекомендуемые сообщения

bumbic    2

Вставляю видео в описание карточки товара, но в мобильной версии сайта видео постоянно обрезается. (шаблон Ava Store)

Поиски решения привели на сайт embedresponsivelyточкаcom который как раз помогает адаптировать видео под разные разрешения. 

При использовании кода с этого генератора в мобильной версии наконец то стало корректно отображаться, но вот на компьютере видео отображается в максимальном размере, хотелось бы ограничить его максимальные размеры, например не более 580х360. Надеюсь понятно объяснил проблему... Вот код:

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//93hl0k_etlI' frameborder='0' allowfullscreen></iframe></div>

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
kentkent17    35

Решит пробу css @media и адаптивная верстка.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
kentkent17    35

На ютубе наберите: адаптивная верстка.

Работы на 5 мин, задайте изначальную разметку и вперед адаптировать под размеры экрана. 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
bumbic    2
В 03.02.2017 в 15:59, kentkent17 сказал:

На ютубе наберите: адаптивная верстка.

Работы на 5 мин, задайте изначальную разметку и вперед адаптировать под размеры экрана. 

Спасибо за наводку, но никак не получается... я не программист ни разу)

Не могли бы подсказать что именно нужно поправить?

Вот кусок кода где встречается  @media:

@media screen and (max-width: 1227px) {

	.product-info > .left + .right {
width: 290px;
    float: left;
	}

	.product-info > .left {

	}



}

@media screen and (max-width: 1200px) {

	.product-info > .left {
width: 100%;
		border-bottom: 1px solid #ccc;
    margin: 0 0 10px 0;
	}

	.product-info > .left + .right {
	width: 100%;
	}



}

@media screen and (max-width: 760px) {
	.product-info .left {
	overflow: hidden;
		margin: 0 !important;
		padding: 0 0 10px 0;
	}

	.share_product {
		float: left;
		    width: 100%;
    height: 35px;
    position: relative;
    overflow: hidden;
	}

	.product-info .image {
		max-width: 100%;
	}

	.product-info .image .sale {
		    right: 0;
    top: 0;
	}

	.utl-mobile .uptl_container-share {
		position: relative !important;
	}

	.uptl_toolbar.uptl_toolbar_simple.__utl-reset.uptl_toolbar_share {
		max-width: 235px;
    margin: 0 auto;
	}

	.category-details {
		    padding: 10px 10px 10px 13px;
	}

	.product-info .image-additional {
		margin: 0 auto;
    float: none;
	}

	.product-info .inforight {
		display: none !important;
	}

	.product-info .description {
		padding: 10px 5px 10px 0px;
	}

	.product-info .price {
		    padding: 2px 0px;
	}

	.product-info .cart {
		padding: 10px 0px;
	}

	.opt_block {
		padding: 0 2px;
	}

	.fastorder_btn {
padding: 0;
	}

	.vblock {
max-width: 33%;
}

	.variantproducts .vbox {
		max-height: 104px;
	}

}

@media screen and (max-width: 470px) {

	.htabs a {
		width: 38%;
    float: left !important;
    display: block !important;
    clear: none;
	}

	.product-info .cart-inside {
		width: 280px !important;
	}

	.vblock  div {
		max-width: 100%;
	}

}

.product-info .inforight {
	display: none;
}

.vblock {
	float: left;
	    -webkit-transition: .5s ease 0s;
    -moz-transition: .5s ease 0s;
    -o-transition: .5s ease 0s;
    transition: .5s ease 0s;
	margin-bottom: 10px;
}

.product-info .cartbutton.nullTvr .button {

}

.centerbg1 {
  display: none;
  width:100%;
  height:100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1000;
  background: url('/design/im/texture1.jpg') #1750B3;
}

.centerbg2 {
  position: absolute;
  left: 50%;
  top: 50%;
}

#preloader {
  top: -50%;
  left: -50%;
  position: relative;
  width: 333px;
  height: 26px;
  background: url('/content/pages/articles/preloaders/bg2.gif');
  border: solid #edda3d 2px;
}

.vbox .all {
    display: block;
    line-height: 1em;
    width: 100%;
    text-align: right;
    clear: both;
    color: #1750B3;
	text-decoration: none;
	position: absolute;
    right: 15px;
    bottom: 0;
}

.vbox.lish {

}

.vbox .all:hover {
	cursor: pointer;
}

.variantproducts .vbox:last-child {

}

.variantproducts .vbox:last-child .vblock:first-child, .variantproducts .vbox:last-child .vblock:nth-child(2), .variantproducts .vbox:last-child .vblock:nth-child(3) {
	display: block !important;
	visibility: visible !important;
}

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу