Разное отображение сайта на мобильных телефонах

[yegorulya]

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

Ради интереса проверила с телефона Редми и там совсем другой вид сайта, корявый, не красивый, очень крупный.

На Редми категория "Чехлы на матрас сьехала и имеет другую форму, более вытянутую. Проблема также в названии товаров, обрезает часть названия - я выделила красным на скрине.

 

Я прилагаю фото для наглядности, сначала идет фото с айфона, после него с редми для наглядности. Подозреваю, что на телефоне еще какой-то другой марки, будет еще какой-то другой вариант отображения.

 

Может есть какой-то способ с помощью стилей и чего-то такого сделать так, чтобы вид был одинаковый и корректный на разных мобильниках?

 

 

 

[addnews]

ссылку на сайт в ЛС скиньте

 

[Tom]

Добавьте медиа-запрос в стили, для размера экранов <768 .

Сейчас у вас это 20px, а для столь плотного отображения в два ряда, это много.

Так например :
 

@media (max-width: 768px) {
.odcatwallhref {font-size: 15px !Important;}
.product-thumb h4 {height: 80px !Important;}
.product-thumb h4 a{line-height: 13px !Important;}
}

 

Ну и самое важное. Изучите понятие H1, не нужно давать товарам названия в 100500 этажей и потом пытаться ломать вёрстку, что бы всё это влезло.

 

Для примера :

Название товара : С котами Мурчики мяу-мяу

H1 : Детское постельное белье c котами Мурчики мяу-мяу - Cottontwill

http://joxi.ru/BA0bOq1Tvyeqvm

[yegorulya]

  В 17.02.2022 в 23:44, Tom сказав:

Добавьте медиа-запрос в стили, для размера экранов <768 .

Сейчас у вас это 20px, а для столь плотного отображения в два ряда, это много.

Так например :
 

@media (max-width: 768px) {
.odcatwallhref {font-size: 15px !Important;}
.product-thumb h4 {height: 80px !Important;}
.product-thumb h4 a{line-height: 13px !Important;}
}

 

Ну и самое важное. Изучите понятие H1, не нужно давать товарам названия в 100500 этажей и потом пытаться ломать вёрстку, что бы всё это влезло.

Для примера :

Название товара : С котами Мурчики мяу-мяу

H1 : Детское постельное белье c котами Мурчики мяу-мяу - Cottontwill

Expand  

Поняла, все учту!
Стили вставлю и посмотрю что будет

[yegorulya]

  В 17.02.2022 в 23:44, Tom сказав:

Добавьте медиа-запрос в стили, для размера экранов <768 .

Сейчас у вас это 20px, а для столь плотного отображения в два ряда, это много.

Так например :
 

@media (max-width: 768px) {
.odcatwallhref {font-size: 15px !Important;}
.product-thumb h4 {height: 80px !Important;}
.product-thumb h4 a{line-height: 13px !Important;}
}

 

Ну и самое важное. Изучите понятие H1, не нужно давать товарам названия в 100500 этажей и потом пытаться ломать вёрстку, что бы всё это влезло.

 

Для примера :

Название товара : С котами Мурчики мяу-мяу

H1 : Детское постельное белье c котами Мурчики мяу-мяу - Cottontwill

http://joxi.ru/BA0bOq1Tvyeqvm

Expand  

Стили добавила, стало немного компактней, но все равно режет названия.

Скрин во вложении

В айфоне как-то по умолчанию после названия отступ идет до видимого описания товара.

И отображает на телефоне Редми по-прежнему категорию на главной "чехлы на матрас" (тут кратко описано, даже не знаю как сократить уже), не на том же уровне, что другие категории.

 

Цитирую:

 

"Название товара : С котами Мурчики мяу-мяу

H1 : Детское постельное белье c котами Мурчики мяу-мяу - Cottontwill" - тут имеете ввиду, чтобы название я делала коротним, а H1 наоборот длинее? поменять местами?

 

 

Змінено 18 лютого 2022 користувачем yegorulya

[magdek]

Судя по скрину может стоит шрифт сделать меньше, не писать капслоком

Змінено 18 лютого 2022 користувачем magdek

[yegorulya]

  В 18.02.2022 в 16:04, magdek сказав:

Судя по скрину может стоит шрифт сделать меньше, не писать капслоком

Expand  

это только один такой пример.
Там небольшая серия товаров - пару штук, остальные выше картинки есть без капслока.

Само название написано не капслоком и его режет - на последнем скрине последнее слово наполовину.

[Dimasscus]

  В 18.02.2022 в 18:27, yegorulya сказав:

это только один такой пример.
Там небольшая серия товаров - пару штук, остальные выше картинки есть без капслока.

Само название написано не капслоком и его режет - на последнем скрине последнее слово наполовину.

Expand  

его не режет. оно перекрывается блоком с текстом безопасно

[yegorulya]

  В 18.02.2022 в 18:41, Dimasscus сказав:

его не режет. оно перекрывается блоком с текстом безопасно

Expand  

А как исправить?

[Dimasscus]

  В 18.02.2022 в 18:47, yegorulya сказав:

А как исправить?

Expand  

Верстать

[yegorulya]

это надо в шаблоне в каком-то файле что-то прописать?

[Dimasscus]

  В 18.02.2022 в 18:58, yegorulya сказав:

это надо в шаблоне в каком-то файле что-то прописать?

Expand  

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

[Venter]

  В 17.02.2022 в 21:08, yegorulya сказав:

Expand  

 

может всё же матрац а не матрас???

 

  В 18.02.2022 в 18:47, yegorulya сказав:

А как исправить?

Expand  

так вы вообще ничего про верстку не знаете, и по сути вообще не знаете какие у вас стили есть

 

Если не понятно как исправить, куда вставлять и тд, то скорее нужно закать работу, чем ВАМ лично править, нет? Вот направите сами, а потом опять на форум что у вас что то там не работает или криво отображается

[niger]

  В 19.02.2022 в 00:06, Venter сказав:

 

может всё же матрац а не матрас???

 

так вы вообще ничего про верстку не знаете, и по сути вообще не знаете какие у вас стили есть

 

Если не понятно как исправить, куда вставлять и тд, то скорее нужно закать работу, чем ВАМ лично править, нет? Вот направите сами, а потом опять на форум что у вас что то там не работает или криво отображается

Expand  

Человек с 24 января по сегодня около 10 тем создал с разным вариантами ошибок и "помогите". Платить не будут точно, хотят чтобы написали решение. Я пару раз помог, но мне кажется, что если не умеешь ловить рыбу, ее нужно купить, а не каждый день приходить на речку и просить помощи с удочкой, наживкой и лодкой.

[Shureg]

  В 19.02.2022 в 00:06, Venter сказав:

может всё же матрац а не матрас???

Expand  

Зачем?

[Tom]

  В 18.02.2022 в 16:00, yegorulya сказав:

Стили добавила, стало немного компактней, но все равно режет названия.

Скрин во вложении

В айфоне как-то по умолчанию после названия отступ идет до видимого описания товара.

И отображает на телефоне Редми по-прежнему категорию на главной "чехлы на матрас" (тут кратко описано, даже не знаю как сократить уже), не на том же уровне, что другие категории.

Expand  

Проверил на Redmi, через оперу и хром. Нет проблем. Не рекомендую проверять через родной браузер Mi. Вы не сможете помочь всем, не сломав при этом отображение другим, у кого ранее не было проблем. А этот браузер(Mi) вовсе не нужно учитывать.

Второй момент, мобильная версия нужна , что бы удобнее было просматривать с маленьких экранов. А маленький экран , это издержки.

Вы же не будете пытаться пробовать свистеть , засовывая все десять пальцев в рот. Здесь всё точно так же. Откройте мобильные версии топовых магазинов, у них чаще всего , если товар по два в ряд, нет никаких километровых названий, точно нет описания(а оно у вас даже на скрине одно и тоже, как заевшая пластинка). А зачастую и кнопок Купить нет.

Уберите описание , как минимум в мобильной версии.

@media (max-width: 768px) {
.product-thumb .caption > h4 + p {display:none;}
.product-thumb .caption {min-height: 90px;}
}

 

  В 18.02.2022 в 16:00, yegorulya сказав:

"Название товара : С котами Мурчики мяу-мяу

H1 : Детское постельное белье c котами Мурчики мяу-мяу - Cottontwill" - тут имеете ввиду, чтобы название я делала коротним, а H1 наоборот длинее? поменять местами?

Expand  

Эта фишка отчасти, для этого и существует. Что бы не ломать вёрстку вы в названии впишите короткое значение. В поле H1  полное. В этом случае и в модулях и на странице категории будет краткий вариант, а в самом товаре длинное значение.

 

Попутно здесь
catalog/view/theme/default/stylesheet/stylesheet.css

строка 230 

padding: 10px 8px 10px 15px;

заменить на 

padding: 10px 5px 5px 12px;

 

Что бы меню было без перескакиваний.

http://joxi.ru/RmzQ5jbHjqRvdr

[yegorulya]

  В 19.02.2022 в 04:39, Shureg сказав:

Зачем?

Expand  

Оба варианта правильные и матрас и матрац.
Скрин во вложении

 

 

[Shureg]

  В 19.02.2022 в 15:59, yegorulya сказав:

Оба варианта правильные и матрас и матрац.

Expand  

А мне вы это зачем пишите? Я-то как раз знаю. 
@Venter пишите, он не знает, но учить пытается

[yegorulya]

  В 19.02.2022 в 00:17, niger сказав:

Человек с 24 января по сегодня около 10 тем создал с разным вариантами ошибок и "помогите". Платить не будут точно, хотят чтобы написали решение. Я пару раз помог, но мне кажется, что если не умеешь ловить рыбу, ее нужно купить, а не каждый день приходить на речку и просить помощи с удочкой, наживкой и лодкой.

Expand  

пересчитала свои темы - 6 штук включая эту.

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

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

Если у меня возникнут сложные ситуации я точно обращусь к  @Tom - Помогал неодноктано, хотя мог просто пройти мимо.

[yegorulya]

  В 19.02.2022 в 04:54, Tom сказав:

Проверил на Redmi, через оперу и хром. Нет проблем. Не рекомендую проверять через родной браузер Mi. Вы не сможете помочь всем, не сломав при этом отображение другим, у кого ранее не было проблем. А этот браузер(Mi) вовсе не нужно учитывать.

Второй момент, мобильная версия, нужна , что бы удобнее было просматривать с маленьких экранов. А маленький экран , это издержки.

Вы же не будете пытаться пробовать свистеть , засовывая все десять пальцев в рот. Здесь всё точно так же. Откройте мобильные версии топовых магазинов, у них чаще всего , если товар по два в ряд, нет никаких километровых названий, точно нет описания(а оно у вас даже на скрине одно и тоже, как заевшая пластинка). А зачастую и кнопок Купить нет.

Уберите описание , как минимум в мобильной версии.

@media (max-width: 768px) {
.product-thumb .caption > h4 + p {display:none;}
.product-thumb .caption {min-height: 90px;}
}

 

Эта фишка отчасти, для этого и существует. Что бы не ломать вёрстку вы в названии впишите короткое значение. В поле H1  полное. В этом случае и в модулях и на странице категории будет краткий вариант, а в самом товаре длинное значение.

 

Попутно здесь
catalog/view/theme/default/stylesheet/stylesheet.css

строка 230 

padding: 10px 8px 10px 15px;

заменить на 

padding: 10px 5px 5px 12px;

 

Что бы меню было без перескакиваний.

http://joxi.ru/RmzQ5jbHjqRvdr

Expand  

Я поняла, большое спасибо!

[niger]

  В 19.02.2022 в 16:08, yegorulya сказав:

пересчитала свои темы - 6 штук включая эту.

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

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

Если у меня возникнут сложные ситуации я точно обращусь к  @Tom - Помогал неодноктано, хотя мог просто пройти мимо.

Expand  

Вы воспользуетесь только бесплатными советами, а не платными услугами.

Любая ситуация для вас сложная. Так как вывести два товара в ряд или поправить размер заголовка - к опенкарт не имеет никакого отношения, это самые базовые знания по HTML+CSS. 

Никто вас задеть ничем не хочет - это факт. Если вас обижает правда или факт - это не моя вина.

 

А знаете, что самое весёлое, что почти все ваши темы - про то "как вывести в два ряда" или "как сделать чтобы на мобильном было не так".

Вы не хотите разобраться, вы хотите бесплатное решение вашей проблемы.

 

Это тоже верстка

 

И это такой же вопрос

И это тоже.

 

Змінено 19 лютого 2022 користувачем niger

[yegorulya]

  В 19.02.2022 в 16:22, niger сказав:

Вы воспользуетесь только бесплатными советами, а не платными услугами.

Любая ситуация для вас сложная. Так как вывести два товара в ряд или поправить размер заголовка - к опенкарт не имеет никакого отношения, это самые базовые знания по HTML+CSS. 

Никто вас задеть ничем не хочет - это факт. Если вас обижает правда или факт - это не моя вина.

Expand  

Так я и сама говорю, что не знаю. Что есть то есть.

Мне советовали опенкарт форум для таких ситуаций, где люди помогают друг другу. Просто вы пишите как-то ехидно, поэтому я и писала слово "задеть".

[niger]

  В 19.02.2022 в 16:26, yegorulya сказав:

Так я и сама говорю, что не знаю. Что есть то есть.

Мне советовали опенкарт форум для таких ситуаций, где люди помогают друг другу. Просто вы пишите как-то ехидно, поэтому я и писала слово "задеть".

Expand  

Когда ваш вопрос касался какой-то логики или другой ситуации, а не такой же, как вы уже просили помощи - я сам был непротив написать вам решение или помочь. Но почти все ваши вопросы - это один и тот же вопрос. 

Ничего ехидного или попытки задеть. 

[yegorulya]

  В 19.02.2022 в 16:31, niger сказав:

Когда ваш вопрос касался какой-то логики или другой ситуации, а не такой же, как вы уже просили помощи - я сам был непротив написать вам решение или помочь. Но почти все ваши вопросы - это один и тот же вопрос. 

Ничего ехидного или попытки задеть. 

Expand  

Хорошо, значит мы друг друга не поняли, мир.

[Dimasscus]

  В 19.02.2022 в 16:26, yegorulya сказав:

Так я и сама говорю, что не знаю. Что есть то есть.

Мне советовали опенкарт форум для таких ситуаций, где люди помогают друг другу. Просто вы пишите как-то ехидно, поэтому я и писала слово "задеть".

Expand  

Вся проблематика этой ситуации- вы лепите кусками. Для того чтобы не заниматься этой чепухой, которая как и написано выше, к опенкарту мало относится- вам нужны знания html и css( хотя бы минимальные) и понимание того, что макет страницы нужно рассматривать в комплексе, с учетом десктоп и мобайл отображения, кросмбраузерности и тд. А так получается- вы одно исправляете- другое ломаете.