Адаптация html страниц сайта под смартфоны и планшеты

Тема в разделе "Дизайн, оформление и шаблоны", создана пользователем Aleks.1, 15 авг 2021.

  1. Aleks.1

    Aleks.1 Пользователь

    Сообщения:
    89
    Симпатии:
    0
    Добрый день, уважаемые форумчане, сайт состоит из движка опенкарт 3 и нескольких html страниц. Движок адаптируется под смартфоны и планшеты, а вот страницы html нет. Поставила тег между <head></head> страниц html:


    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    Сработало.
    Но объекты на этих страницах хаотично распределяются.
    Как быть? что сделать, чтобы они выглядели так же как и на дескоптной версии сайта?
     
    Aleks.1, 15 авг 2021
    #1
  2. demar

    demar Новичок

    Сообщения:
    11
    Симпатии:
    1
    обратится к специалистам, чтобы они все сделали
     
    demar, 15 авг 2021
    #2
  3. fanatic

    fanatic Продвинутый пользователь

    Сообщения:
    1.415
    Симпатии:
    239
    в мобилке, обычно блоки располагаются немного по другому.
    конкретно по вашему вопросу, думаю нужно править верстку
    трудно сказать не видя сайт
     
    fanatic, 15 авг 2021
    #3
  4. Aleks.1

    Aleks.1 Пользователь

    Сообщения:
    89
    Симпатии:
    0
    Такой возможности нет, к сожалению, буду делать только я. Обращаюсь за советами.
     
    Aleks.1, 17 авг 2021
    #4
  5. demar

    demar Новичок

    Сообщения:
    11
    Симпатии:
    1
    успехов
    советов вам уже уйму надавали, и тут и на опенкартфоруме
     
    Последнее редактирование: 17 авг 2021
    demar, 17 авг 2021
    #5
  6. vikaharkov

    vikaharkov Продвинутый пользователь

    Сообщения:
    676
    Симпатии:
    71
    Забей на местных проходимцев - они сами не знают, а просто на умняк присели. Тот же Демар - я не вижу ни одного совета от него тут, а с таким деловым видом говорит, будто великий спец...

    Алекс, задавай и задавай конкретные вопросы - кто-то, да откликнется
     
    vikaharkov, 17 авг 2021
    #6
    Aleks.1 нравится это.
  7. vikaharkov

    vikaharkov Продвинутый пользователь

    Сообщения:
    676
    Симпатии:
    71
    ХТМЛ или нет никакой роли не играет - в стиля прописывается, как и везде. Дайте код этой страницы
     
    vikaharkov, 17 авг 2021
    #7
    Aleks.1 нравится это.
  8. fanatic

    fanatic Продвинутый пользователь

    Сообщения:
    1.415
    Симпатии:
    239
    читать, читать и читать - 'адаптивная верска'
     
    fanatic, 18 авг 2021
    #8
    Aleks.1 нравится это.
  9. Aleks.1

    Aleks.1 Пользователь

    Сообщения:
    89
    Симпатии:
    0
     
    Последнее редактирование: 30 авг 2021
    Aleks.1, 29 авг 2021
    #9
  10. vikaharkov

    vikaharkov Продвинутый пользователь

    Сообщения:
    676
    Симпатии:
    71
    ...и шо это? Что вам тама не ясно?

    Как я полагаю, тот код написан неверно...

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

    Естественно, такая страница будет криво-косо на странице выглядеть (если вообще будет выглядеть - ща запущу гляну)
     
    Последнее редактирование: 29 авг 2021
    vikaharkov, 29 авг 2021
    #10
  11. vikaharkov

    vikaharkov Продвинутый пользователь

    Сообщения:
    676
    Симпатии:
    71
    Но вы не грустите - увас информер погоды зато работает :)
    Так шо сдвиги есть!
     

    Вложения:

    vikaharkov, 29 авг 2021
    #11
  12. Aleks.1

    Aleks.1 Пользователь

    Сообщения:
    89
    Симпатии:
    0
    Спасибо.
     
    Aleks.1, 30 авг 2021
    #12
  13. hartop

    hartop Новичок

    Сообщения:
    4
    Симпатии:
    1
    Opencart использует сетку bootstrap, если не будет понимая как работает сетка bootstrap, то будет очень тяжело, еще посоветовал бы изучить TWIG это шаблонизатор который так же используется в opencart 3 версии.
     
    hartop, 12 сен 2021
    #13
    Aleks.1 нравится это.
  14. vikaharkov

    vikaharkov Продвинутый пользователь

    Сообщения:
    676
    Симпатии:
    71
    Как на десктопной ну никак не получится - они разного размера по определению
    Для тренировки нажмите F12 на компе и там в окне (слева вверху обычно) есть такая пипочка со стрелочкой (на скрине ниже смотрите) кликаете на неё и наводите на какой нить объект (или текст) на экране открытого браузера - в правом окошке появляется набор разных фиговин с галочками слева от них. Там и пробуете то убирать те галочки и смотреть, шо изменилось, то параметры менять (кликом на параметре редактировать его). И так будете тренироваться, пока не поймёте, как оно работает. Ничего в настоящем сайте не изменится, не бойтесь. А если нужно будет закрепить проделанные изменения - то в правой части есть ссылка возле каждого параметра - если на неё навести курсор, то появится адрес, где этот документ лежит и на какой строке в нём это прописано (а если inline написано - то это прямо в документе открытом прописано) (я надеюсь, что у вас есть редактор Notepad++, чтобы проделывать все изменения - самый простой и хороший)
     

    Вложения:

    vikaharkov, 14 сен 2021
    #14
  15. vikaharkov

    vikaharkov Продвинутый пользователь

    Сообщения:
    676
    Симпатии:
    71
    Бустрап очень часто вредит вместо помощи. Некоторые (я, например, на заре своей юности) в таких случаях (когда вредит) берут и меняют показатели, прописанные в Бустрапе. Сейчас я рекомендую этого не делать, а если нужно такое, то изменить эти показатели с помощью медиа запроса, например. Медиазапросы перекрывают обычные прописи и браузер показывает как правило то, что в них прописано (если оно прописано правильно)
     
    vikaharkov, 14 сен 2021
    #15