RWD - strona sie nie skaluje dobrze

Question

Mam problem z RWD mojej strony www.marg-soft.com

Na razie jestem na etapie tworzenia wyświetlanie na telefonie to wiadomo tragedia ale to dopracuje, póki co strona mi się źle skaluje na komputerze stacjonarmy dwa monitory różne rozdzielczości działa fajnie i myślałem, że jest ok ale potem wszedłem na laptopie 15 cali i się okazało, że strona się nie skaluje i mam na dole pasek do przewijania.

 

gdy w media w bootstrap ustawiłem media w procentach to nie wiem czemu strona traci jakby marginesy boczne i się równa do lewej.

Answer 1

Nie widzę kolumn w Twoim układzie

Answer 2

Cześć.

Widzę, że nie za bardzo masz pojęcie o responsywnym projektowaniu,

Position: absolute i left ponad 1000 pikseli to zdecydowanie nie tędy droga.

Zacząłem przerabiać twoją stronę na responsywną i w kodzie html i style.css napisalem mnóstwo notatek

żebyś mógł się wdrożyć, jak działa bootstrap.

tutaj możesz zobaczyć kawałek tej strony:

http://beauthemeful.com/margsoft/

i pobrać całość tutaj:

http://beauthemeful.com/margsoft/margsoft.zip
 

Jakbyś miał jeszcze jakieś pytania to pisz.

Comments

Cześć nie chciałem zadawać nowego pytania dlatego odpisuje tutaj.

 

Wgrałem już nową stronę robię wszystko od Iphone 5 w górę. Jestem aktualnie na Ipad wersja vertical i ustawiłem kolumny dla obrazkow i tekstow w Usługi lecz nie wiem czemu bo podzieliło mi to tak jak chce jednak napis Usługi przesunął się do lewej i nie równo teraz to jest ustawione.

 

I czemu footer tak zjechał niżej chciałbym go mieć zaraz pod obrazkiem, w którym będzie kontakt. tak jak to jest w wersji na iphone 5 Vertical i landscape

---

Teraz już wogóle widzę, że nie załączyłeś bootstrap na tej stronie

Nadal nie używasz tego kodu, który napisałem w notatkach:

 <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-4">
                        </div>
                        <div class="col-md-4">
                        </div>  
                        <div class="col-md-4">
                        </div>
                    </div>
                </div>    

Wydaje mi się, że ich nie przeczytaleś.

Ja bym na twoim miejscu nie robił mobile-first.

Tylko normalnie, przy pomocy gridu bootstrap.

I na koniec przy pomocy:

@media (max-width: 1119px) {
}

Dostosowywać do wybranych rozdzialczości.

Jeżeli nie będziesz używał tych wskazówek i bootstrapa, które ci napisałem, to ja lepszych sposobów nie znam na responsywny design.

Uważam, że ten jest najlepszy. Wysłałem ci uproszczony grid z bootstrap, który waży 11 kb,

więc jest bardzo lekki i moim zdaniem to najlepsza opcja na responsive design.

---

Ok jak bede w domu sprobuje zrobic to jeszcze raz za pomoca bootstrap.

 

Przeczytalem tylko myslalem ze dobrym sposobem jest to co wyczytalem o mobile first.

 

Napisze strone po raz trzeci najwyzej :p

 

Widze ze z pasj8 informatyki sa tez filmiki na youtube o bootstrap wiec je obejrze na sam poczatek i zabiore sie za to jeszcze raz. Jak to mowia do 3 razy sztuka teraz mam nadz8eje juz zadnego bledu nie popelnie.

---

Nie spinaj się tak, że do 3 razy sztuka.

To jest naprawdę fajna zabawa.

Nie ma pośpiechu :)

 <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-4">
                        </div>
                        <div class="col-md-4">
                        </div>  
                        <div class="col-md-4">
                        </div>
                    </div>
                </div>    

Ten prosty kod który napisałem wyżej tworzy tak jakby 3 półki wewnątrz których coś możesz wstawić.

Każda z nich zajmuje szerokość 1/3 kontenera. Spróbuje narysować xD:

| col-md-4 | col-md-4 | col-md-4 |

Jednak na tablecie, czy telefonie każda z tych półek zajmuje 100% szerokości ekranu i  wyświetla się jedna pod drugą. O tak:

| col-md-4 |

| col-md-4 |

| col-md-4 |

To jest naprawdę bardzo prosty mechanizm :)

Answer 3

Dzieki wielkie za pomoc. Wlasnie ogarnalem rwd tez duzo filmow obejrzalem i robie tak zwana metoda mobile first na pewno teraz juz bede wiedzial i robil to duzo lepiej.