- 0
-
Similar Content
-
By Алеся
Подскажите, пожалуйста, что можно прописать, чтобы при уменьшении разрешения экрана колонки справа смещались вниз? Весь код в песочнице https://jsfiddle.net/fzbkeLyt/
Пробовала: Но не сработало.
@media (max-width: 1200px) {
.container {
max-width: 970px;
}
}
@media (max-width: 992px) {
.container {
max-width: 750px;
}
}
@media (max-width: 767px) {
.container {
max-width: none;
}
}
-
By MagenDavid
Всем привет! Задание:
При размерах экрана от 800px и больше - col1=30%,col2=30%,col3=30% от ширины экрана и рассположены в 3 колонки; При размерах экрана от 500px до 800px - col1=100%,col2=50%,col3=50% от ширины экрана и первый блок сверху, два остальных снизу вместе; При размерах экрана от 0 до 500px - col1=90%,col2=90%,col3=90% от ширины экрана и расположены друг под другом. Вопрос: как сделать, чтобы в колонках отображалось нужное значение в %-х в зависимости от размера экрана? unit.zip
-
By Неугомонный
<style> .right { float: right; } @media only screen and (max-width: 600px) { .zzzz { display: none; } } </style> <div class="right zzzz"> // ... </div> Необходимо создавать класс zzzz для шаблона больше чем 600px если мне нечего будет вписать в него никаких параметров ?
-
By Неугомонный
Всем привет, есть документация под нормы расширения экранов @media screen , где обозначено до скольки PX я могу скажем так воображать себе в голове под что я верстаю телефон/планшет/пк ?
-
By Seendorei
Здравствуйте уважаемые форумчане, подскажите пожалуйста, не получается сделать блок адаптивным(я в этом не очень разбираюсь =)) ). Уже голова кипит, все попереисправлял, переделал, удалял и добавлял, что просто запутался, очень прошу вас распутать и подсказать как правильно, чтобы я точно знал :). Спасибо заранее.
В чем собственно проблема: А в том, что этот блок не уменьшается пропорционально ширине экрана.
На 1 скриншоте он вообще выпадает из общего контента. А на 2 скриншоте появляется горизонтальная прокрутка.
Пересмотрел много роликов и статей, но чет так сильно запутался во всем этом :((.
CSS code блока и т.д:
@media (max-width: 320px) { .wat{ left: 260px; } } .wat{ margin:0; margin-left: 5.5em; left: auto; top: 260px; border: 3px red solid; border-radius: 3px; width: 150px; height: 50px; position: relative; padding-left: 4px; padding-top: 0px; display: block; } #btn3{ position: absolute; margin-left: 8px; top: 13px; border: 3px red solid; border-radius: 3px; width: 150px; height: 50px; } span{ font-size: 16pt; margin-left: 50px; position: absolute; top: 14px; left: -1px; font-size: 16pt; color: white; } .opa{ display: block; border-radius: 3px; border: 3px red solid; width: 150px; height: 50px; position: relative; z-index: 100000; margin-top: -12.8em; margin-left: 18.5em; } @media (max-width: 320px){ .opa{ width: 25%; height: auto; } } Вот HTML Код:
<ul id="slides"> <li class="slide showing">Slide 1 <!--<div class='wat'><img id='btn3' src='app2.png'></img></div>--> </li> <li class="slide">Slide 2</li> <li class="slide">Slide 3</li> </ul> <div class='opa'> <img src='app.svg'></img> <span>App Store</span> </div>
-
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-
Question
Baravo
Добрый день. При вёрстке шаблона столкнулся с такой проблемой: используя медиа-запросы без указания !important к нужному селектору, медиа-запросы не работают. Например:
@media screen and (max-width: 640px){ .wrapper{ width: 600px !important; }}Если удалить !important ширина блока останется одинаковой, для любого разрешения экрана.
Link to comment
Share on other sites
1 answer to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.