Вопрос:

Медиа-запрос и текст

html css responsive-design

33 просмотра

1 ответ

334 Репутация автора

Я пытаюсь найти способ разместить заголовок и подзаголовок так, чтобы они соответствовали друг другу. Но когда я устанавливаю его на одном устройстве, текст переходит на другое устройство. Это означает, что я просто хожу по кругу.

Есть ли способ, с помощью которого я могу сказать, что на всех мобильных устройствах поле должно быть fx: 20px слева или как вы, ребята, делаете это?

HTML

<div class="max-container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    @CurrentPage.GetGridHtml("Grid")
                </div>
            </div>
        </div>

CSS

.header-text h1 {
    font-weight: 900;
    font-size: 40px;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    padding-top: 160px;
}




.header-text h2 {
    font-size: 20px !important;
    margin-bottom: 25px;
    font-weight: 900;
    color: #fff;

}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .header-text h2 {
    font-size: 20px !important;
    margin-left: 20px;
    font-weight: 900;

}
Автор: McDuck4 Источник Размещён: 22.08.2016 09:33

Ответы (1)


1 плюс

160 Репутация автора

Решение

Попробуй это:

/* Smartphones (portrait and landscape) ----------- */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
        .header-text h2, .header-text h1 {
            margin-left: 20px;
        }
    }

Вам не нужно повторять все остальные значения, если они остаются прежними - вы также заметите, что можете комбинировать селекторы вместе, что делает ваш код легче.

Кроме того, будьте осторожны с использованием ! Важный (это может сделать будущее кодирование действительно грязным). Попробуйте добавить конкретику, прежде чем использовать это.

Автор: Kate Miller Размещён: 22.08.2016 10:37
Вопросы из категории :
32x32