Мобильная версияУ меня есть 1 изображение в div и 1 текст заголовка в div в одном контейнере. Хотя он работает нормально до размера экрана >= 576. Как я и хотел, то есть изображение и текст в одной строке пропорционального размера.
Но когда размер экрана становится < 576, это не работает, изображение становится большим и текст становится под изображением
Я использовал медиа-запрос для текста (Span), но думаю, что делаю что-то не так с Медиа-запрос изображения, который не работает.
Пожалуйста, посмотрите. Я предполагаю разумное решение.
Пожалуйста, помогите.
мои коды:
#container-logo-box { /* фоновое изображение: url(/BOOTSTRAP/img/beautiful-color-ui-gradients-backgrounds-sexy-blue.png); размер фона: обложка; фоновая позиция: центр; фоновый клип: текст; */ цвет фона: RGB(25 150 255) } #logo-img-div { /* отображение: встроенный блок; */ /* выравнивание элементов: центр; */ /* позиция: наследовать; */ маржа-верх: -.0%; } #name-logo-div { /* отображение: встроенный блок; */ маржа-верх: 0%; } #имя-логотипа { отображение: встроенный блок; семейство шрифтов: Britannic Bold; ширина: 100%; шрифт-вес: жирнее; цвет: желтый; верхняя маржа: -.05%; нижняя граница: -2%; } #имя-лого2 { маржа-верх: -4%; поле слева: 12%; белый цвет; } /* МЕДИА-ЗАПРОС */ пролет.bkb{ размер шрифта: 2.2rem; } @media (минимальная ширина: 576 пикселей) { пролет.bkb { размер шрифта: 3.0rem; } } @media (минимальная ширина: 768 пикселей) { пролет.bkb { размер шрифта: 5.0рем; } } @media (минимальная ширина: 992 пикселей) { пролет.bkb { размер шрифта: 5.2rem; } } @media (минимальная ширина: 1200 пикселей) { пролет.bkb { размер шрифта: 5,5em; } } /* медиа-запрос для h1,h2 и т. д. */ h2.bkb{ размер шрифта: 18 пикселей; } @media (минимальная ширина: 576 пикселей) { h2.bkb { размер шрифта: 18 пикселей; } } @media (минимальная ширина: 768 пикселей) { h2.bkb { размер шрифта: 22 пикселей; } } @media (минимальная ширина: 992 пикселей) { h2.bkb { размер шрифта: 28 пикселей; } } @media (минимальная ширина: 1200 пикселей) { h2.bkb { размер шрифта: 32px; } } /* медиа-запрос для img и т. д. */ .img-am-логотип { высота: 100; ширина: 100; } @media (минимальная ширина: 576 пикселей) { .img-am-логотип { высота: 100; ширина: 100; } } @media (минимальная ширина: 768 пикселей) { .img-am-логотип { высота: 100; ширина: 100; } } @media (минимальная ширина: 992 пикселей) { .img-am-логотип { высота: 140; ширина: 140; } } .img-am-логотип{ высота: 140; ширина: 140; } ꙮͮꙮ͵ꙮا ꙮͮꙮͮꙮا णमो अरिहंताणं, णमो सिद्धाणं, णमो Дэйв, Дэйв Найт, णमो लोए सव्व साहूणं ! ꙮͮꙮ͵ꙮا ꙮͮꙮͮꙮا
Арихант Мандал Благотворительный медицинский пункт
