1

Тема: Адаптивна верстка, що не так?

Доброго дня, шановні.
Таке питання, що потрібно зробити, що б сайт коректно відображався на девайсах iPhone5s, Galaxy та інших зі списку хрому.
Я додав відповідні медіазапити, а норм відображається тільки на iPad і в режимі адаптивності. Як це пофіксити? Прикріплюю свій проект, може хто підкаже, як це пофіксити?
Або вкажіть на основні помилки стосовно адаптивності.

Post's attachments

Testing IGBeauty.rar 5.16 mb, 61 downloads since 2016-10-03 

2 Востаннє редагувалося Q-bart (04.10.2016 13:42:09)

Re: Адаптивна верстка, що не так?

Давайте на github, а ще краще розгорніть десь, лінь скачувати і розгортати локально

Прихований текст
О, я вважав дивними тих людей, які казали мені так само, коли писав сюди про свій перший проект. Зараз розумію :)
Навчаюсь вчитись, щоб навчатись.

3

Re: Адаптивна верстка, що не так?

яб допоміг чуваче.
але тут тобі треба сюди http://getbootstrap.com/

ненавижу бутсрап...

принаймні почни із зміни мети

 <meta name="MobileOptimized" content="width">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

а потім зміні врап і навчись юзати %

    margin: 0 auto;
    max-width: 96%;
    position: relative;
    width: 1180px;
Подякували: poperechnyi11

4 Востаннє редагувалося poperechnyi1 (04.10.2016 15:33:48)

Re: Адаптивна верстка, що не так?

добре які сервіси для розгортки ви б порадили?

5

Re: Адаптивна верстка, що не так?

Key написав:

яб допоміг чуваче.
але тут тобі треба сюди http://getbootstrap.com/

ненавижу бутсрап...

принаймні почни із зміни мети

 <meta name="MobileOptimized" content="width">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

а потім зміні врап і навчись юзати %

Дякую, це значно покращило ситуацію і підняло бойовий дух.
    margin: 0 auto;
    max-width: 96%;
    position: relative;
    width: 1180px;

6

Re: Адаптивна верстка, що не так?

poperechnyi1 написав:

добре які сервіси для розгортки ви б порадили?

безкоштовний хостинг називається

Навчаюсь вчитись, щоб навчатись.

7

Re: Адаптивна верстка, що не так?

Треба уважно прочитати документацію bottstrap.
Приведу приклад вашої недоробки.
У вас є блоки, в котрих ви вірно вказали адаптуючі класи, наприклад col-xs-12. Але ж, ви не застосували ці класи для обгорток цих блоків - wrapper, first-carusel та інш.

З'їж ще цих м'яких французьких булок, та випий чаю.
Подякували: poperechnyi11

8

Re: Адаптивна верстка, що не так?

я зараз, здається зрозумів в чому справа і переписую верску.
Як перепишу то вже скину.

9

Re: Адаптивна верстка, що не так?

Як прибрати горизонтальний скрол??
Я перероблюю вже краще виходить, але я не можу зрозуміти який елемент вилазить за рамки.
Ось посилання на: https://github.com/poperechnyi1/Testing-IGBeauty.git

10

Re: Адаптивна верстка, що не так?

Q-bart написав:

Давайте на github, а ще краще розгорніть десь, лінь скачувати і розгортати локально

Прихований текст
О, я вважав дивними тих людей, які казали мені так само, коли писав сюди про свій перший проект. Зараз розумію :)

https://github.com/poperechnyi1/Testing-IGBeauty

11 Востаннє редагувалося Key (07.10.2016 19:26:43)

Re: Адаптивна верстка, що не так?

=)
ненавижу бутсрап...

body{
  overflow-x:hidden;
}
Подякували: leofun011

12 Востаннє редагувалося poperechnyi1 (07.10.2016 21:55:35)

Re: Адаптивна верстка, що не так?

Key написав:

=)
ненавижу бутсрап...

body{
  overflow-x:hidden;
}

Не допомогло, сторінкою все одно можна рухати по горизонталі.
А от якщо прибрати(зняти галочку) з цього то все норм:

@media (min-width: 992px)
.container {
  width: 970px;
}

Але для того, щоб прибрати це треба до бутстрапу лізти

13

Re: Адаптивна верстка, що не так?

Ще один ляп знайшовся: #services > div > div.row  там була не закрита дужка, тчоніше закрита не там

14

Re: Адаптивна верстка, що не так?

@media (min-width: 992px)
.container {
  width: 100%;
}
Подякували: poperechnyi11

15

Re: Адаптивна верстка, що не так?

Коротше, ось остання версія верстки, вже переправив купу костилів, але ще більша купа залишилась.
Головна проблема, що горизонтальний скрол виникае не регулярно, хоч його і взагалі не має бути.
https://github.com/poperechnyi1/IGBeauty.git
Надалі буду поглиблювати знання в даній області.

16

Re: Адаптивна верстка, що не так?

вчіть краще чисту верстку і чистий сss.

Подякували: leofun011

17

Re: Адаптивна верстка, що не так?

Думаю, проблема в слайдері з брендами

18

Re: Адаптивна верстка, що не так?

Key написав:

вчіть краще чисту верстку і чистий сss.

просто стояло завдання зробити на бутстрап

19

Re: Адаптивна верстка, що не так?

Sensetivity написав:

Думаю, проблема в слайдері з брендами

можливо, але я вже буду виконувати далі інший проект, зараз на ютубі подивлюсь відео уроки по верстці через бутстрап і адаптивній верстці. А там далі буде видно.