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

Решено Как пропистать в стилях, контакты для мобильной версии

Ivan777

Форумчанин
Доброго вечера, извиняюсь, если неправильно тему обозначил, суть в следующем: Сайт http://kupit-uggi.com/ (storefront) прописал контакты, прописал в стилях, чтобы все встало по центру, все вышло, но в мобильной версии с телефона, все слетает и выглядит криво, что прописать еще в стилях, чтобы в мобильной версии все стояло ровно. Заранее спасибо!
 

Moonlight31

Опытный
Доброго вечера, извиняюсь, если неправильно тему обозначил, суть в следующем: Сайт http://kupit-uggi.com/ (storefront) прописал контакты, прописал в стилях, чтобы все встало по центру, все вышло, но в мобильной версии с телефона, все слетает и выглядит криво, что прописать еще в стилях, чтобы в мобильной версии все стояло ровно. Заранее спасибо!
Необходимо использовать медиа запросы

Например:
В style.css дописать
Код:
@media (max-width: 320px) {
    .entry-content span {
        text-align: center;        
    }
}
где .entry-content span, это стиль, который вы применяете к тексту
 

Ivan777

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

Moonlight31

Опытный
Добрый день, вставил код в стили, но ничего не изменилось((
Добрый день! Этот код - пример для разрешения 320 px

@media (max-width: 320px) - это медиазапрос, который объявляет, какие настройки будут применены для экрана, максимальная ширина которого 320px.

Далее Вам необходимо посмотреть, для какого компонента необходимо задать настройки, т.е.

@media (max-width: 320px) {
.ваш_компонент {
text-align: center;
}
}
 
  • Like
Реакции: D&B

Ivan777

Форумчанин
Сделал как Вы и сказали, но всё на своих местах(
@media (max-width: 320px)
{
.phone_header_text
{
text-align: center;
}
}
Может нужно прописать отдельное меню для мобильной версии сайта? как на этом сайте? у них, в мобильной версии совсем все по другому в шапке. http://uggaustralian-online.ru/
 

Moonlight31

Опытный
Сделал как Вы и сказали, но всё на своих местах(
@media (max-width: 320px)
{
.phone_header_text
{
text-align: center;
}
}
Может нужно прописать отдельное меню для мобильной версии сайта? как на этом сайте? у них, в мобильной версии совсем все по другому в шапке. http://uggaustralian-online.ru/
Для мобильной версии я бы скрыл все эти данные в header и перенес в footer. Оставил бы только меню и логотип в header

Код:
@media (max-width: 320px) {
.phone_header {
    visibility: hidden;
}
}
 

Moonlight31

Опытный
Прописать медиазапрос для разрешения и объявить условие display: none;
для .phone_header, phone_header_text big_grpah, phone_text ya-phone
 

Ivan777

Форумчанин
Спасибо большое!!, с помощью последней команды, убрать контакты в мобильной версии получилось!!))
 
Сверху Снизу