Media запросы к разным элементам div

12
R
На сайте с 06.02.2022
Offline
27
914

Доброго времени суток. Нуб вопрос такой появился, с @media. Настраиваю шрифты для сайта, до этого данные запросы не использовал. Можно ли внутри div например для span и p установить один размер шрифта, а для тега a например другой. Интересует не совсем то что спрашиваю, но из ответа пойму. Немного проясню.

@media only screen and (min-width: 300px) and (max-width: 680px) {

p.text3d-3  {font-size: 48px !important;}
}

Для этого тегу p нужно прописать класс text3d-3  . Можно ли сделать и если да то как, чтобы div указать класс text3d-, p и span оставить просто без класса в разметке. Пробовал всяко разно не выходит( 

div p .text3d-3  не работает

.text3d-3 div > p не работает

Через запятую тоже не получается. Люди добрые если поняли вопрос помогите пожалуйста, на самом деле пол дня уже ищу ответ. С одного сайта скачал стиль с него пытаюсь слизать, но вообще как в лесу ночью.

@media (max-width: 1199px) { .site-navigation .main-menu li a { font-family: Open Sans; } } body, .panel-title, .site-main .wp-caption p.wp-caption-text, .mini-cart-link i, .anps_menu_widget .menu a:before, .vc_gitem_row .vc_gitem-col.anps-grid .post-desc, .vc_gitem_row .vc_gitem-col.anps-grid-mansonry .post-desc, .alert, div.wpcf7-mail-sent-ng, div.wpcf7-validation-errors, .contact-form .form-group label, .contact-form .form-group .wpcf7-not-valid-tip, .wpcf7 .form-group label, .wpcf7 .form-group .wpcf7-not-valid-tip, .projects-item .project-title, .product_meta, .site-footer .social.social-border i, .btn.btn-wide, .btn.btn-lg, .breadcrumb li:before {
    font-size: 18px;
} h1, .h1 { font-size: 49px; } h2, .h2 { font-size: 40px; } h3, .h3 { font-size: 21px; } h4, .h4 { font-size: 18px; } h5, .h5 { font-size: 16px; } nav.site-navigation, nav.site-navigation ul li a { font-size: 13px; } @media (min-width: 1200px) { nav.site-navigation ul li > ul.sub-menu a, header.site-header nav.site-navigation .main-menu .megamenu { font-size: 12px; } }

W1
На сайте с 22.01.2021
Online
304
#1
ronibestplay :
Можно ли сделать и если да то как

Можно.

ronibestplay :
если да то как

Разметку надо смотреть

Мой форум - https://webinfo.guru –Там я всегда на связи
R
На сайте с 06.02.2022
Offline
27
#2
webinfo #:

Можно.

Разметку надо смотреть

Спасибо за ответ. Ну условно так, мне в подсказках кажется неплохую тему показали, позже почитаю к сожалению нужно идти. Не думал что так быстро кто то откликнется, форум супер. Как видите тут полно тегов ul и прочее, хочу научиться настраивать их для мобилки точечно, чтобы не писать класс каждому тегу. Пришел к выводу что это не реально.😀 Разметка по сути если знать ответ не должна быть важна.

<div class="tabs3d">
    <div class="tabs3d-control"></div>
    <div class="tabs3d-stage">
        <div class="spinner spinner-left">
            <div class="spinner-face" data-bg="#2b4356" data-menu="Основное">
                <div class="content2">
                    <div class="content2-left">
                    </div>
                    <div class="content2-right">
                        <div class="content2-main">
                            <p>текст</p>
                        </div>
                    </div>
                </div>
            </div>                
<!--  вкладка2 -->
            <div class="spinner-face" data-bg="#353f49" data-menu="Чертеж">
                <div class="content2">
                    <div class="content2-left");">
                    </div>
                    <div class="content2-right">
                        <div class="content2-main">
                            <p>Основные характеристики</p>
                            <ul>
<li></li>
<li></li>
<li></li>
</ul>
                        </div>
                    </div>
                </div>
            </div>      
            <!--  вкладка3 -->
            <div class="spinner-face" data-bg="#353f49" data-menu="Дополнительно">
                <div class="content2">
                    <div class="content2-left"">
                    </div>
                    <div class="content2-right">
                        <div class="content2-main">
                            <p>Текст:</p>
                            <ul>
<li></li>
<li></li>
                      <p>текст.</p>
                        </div>
                    </div>
                </div>
            </div>          
        </div>
    </div>
</div>

богоносец
На сайте с 30.01.2007
Offline
760
#3
ronibestplay :

@media only screen and (min-width: 300px) and (max-width: 680px) {

p.text3d-3  {font-size: 48px !important;}
}

Для этого тегу p нужно прописать класс text3d-3  . Можно ли сделать и если да то как, чтобы div указать класс text3d-, p и span оставить просто без класса в разметке. Пробовал всяко разно не выходит( 

div p .text3d-3  не работает

.text3d-3 div > p не работает

А у вас класса text3d-3 нигде не не указано в приведённом вами html-коде выше (он с незакрытыми тегами, путаница ещё будет).

Можете оставить p и span оставить просто без класса в разметке,  а в объемлющем их теге указать    class="text3d-3"   но в стилях этот класс указывать без тегов: 

@media only screen and (min-width: 300px) and (max-width: 680px) {
.text3d-3  {font-size: 48px !important;} 
}

R
На сайте с 06.02.2022
Offline
27
#4
богоносец #:

А у вас класса text3d-3 нигде не не указано в приведённом вами html-коде выше (он с незакрытыми тегами, путаница ещё будет).

Можете оставить p и span оставить просто без класса в разметке,  а в объемлющем их теге указать    class="text3d-3"   но в стилях этот класс указывать без тегов: 

@media only screen and (min-width: 300px) and (max-width: 680px) {
.text3d-3  {font-size: 48px !important;} 
}

Спасибо за ответ.

Я редактировал здесь в чате, поэтому могут быть где то теги не закрыты. Нет такого скила пока что видеть без редактора какой закрыт какой нет, это high level😀Сижу репу чешу откуда -3 взялась. Тем не менее ошибку я только на форуме допустил, так как вы в конце написали работает я знаю. Дело в том что внутри дива напиханы <ul>, <a>, <p>, да и вообще на будущее  внутри div может быть много чего. Вот я и спрашиваю как внутри  text3d увеличить размер шрифта только <p> и <span> например. Пришел к выводу что нужно награждать эти теги этим же классом, но это как то мусорно получается.

R
На сайте с 06.02.2022
Offline
27
#5

Слушайте вот так сработало, не ужели я и правда 3 откуда то нарисовал. Так Список <ul> не увеличелмся, а <p> - да. Как же так...Я просто не верю что мог это проглядеть. Спасибо вам ребят, форум просто ТОП!

@media only screen and (min-width: 300px) and (max-width: 680px) {

.tabs3d p, ul {font-size: 46px !important;}
}

M
На сайте с 17.06.2021
Offline
75
#6
ronibestplay #:

Слушайте вот так сработало, не ужели я и правда 3 откуда то нарисовал. Так Список <ul> не увеличелмся, а <p> - да. Как же так...Я просто не верю что мог это проглядеть. Спасибо вам ребят, форум просто ТОП!

@media only screen and (min-width: 300px) and (max-width: 680px) {

.tabs3d p, ul {font-size: 46px !important;}
}

@media (max-width: 680px) {

}
Так лучше напиши, или ты будешь верстать отдельно под экран с шириной меньше 300 пикселей?) 

Bybit крипто биржа https://partner.bybit.com/b/58507 /// Зарубежные VPS с оплатой РФ картами https://aeza.net/?ref=416422 (+15% к пополнению) //// Обучаем нейронки на сайте https://f4ck41.fun/
богоносец
На сайте с 30.01.2007
Offline
760
#7
Параноики верстали... ещё когда народ мобильным интернетом почти не пользовался.
R
На сайте с 06.02.2022
Offline
27
#8
makepuff #:

@media (max-width: 680px) {

}
Так лучше напиши, или ты будешь верстать отдельно под экран с шириной меньше 300 пикселей?) 

Нет у меня контент на 1280px сделан, на планшетах он норм читается и видится, а это для телефона + его поворота в горизонтально положение.
R
На сайте с 06.02.2022
Offline
27
#9
makepuff #:

@media (max-width: 680px) {

}
Так лучше напиши, или ты будешь верстать отдельно под экран с шириной меньше 300 пикселей?) 

Или вы имеете ввиду что (min-width: 300px) не обязательно прописывать? Вообще изначально подсмотрел такой вариант изначально на форуме. Спасибо лишний код удалять я люблю)
R
На сайте с 06.02.2022
Offline
27
#10
Мне вот интересно, а можно контент в блоках менять для мобилок, например в основной версии сайта есть кнопка визуальный конструктор, а  в мобилке через медиа запрос сделать просто-конструктор.
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий