• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

RWD - strona sie nie skaluje dobrze

0 głosów
111 wizyt
pytanie zadane 4 lutego w HTML i CSS przez GaryNJ Nowicjusz (240 p.)
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.

3 odpowiedzi

0 głosów
odpowiedź 4 lutego przez pablop76 Szeryf (96,690 p.)

Nie widzę kolumn w Twoim układzie

0 głosów
odpowiedź 6 lutego przez pirouetti Bywalec (2,020 p.)
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.
komentarz 7 lutego przez GaryNJ Nowicjusz (240 p.)
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
komentarz 7 lutego przez pirouetti Bywalec (2,020 p.)
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.
komentarz 7 lutego przez GaryNJ Nowicjusz (240 p.)
edycja 7 lutego przez GaryNJ
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.
komentarz 7 lutego przez pirouetti Bywalec (2,020 p.)
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 :)
0 głosów
odpowiedź 6 lutego przez GaryNJ Nowicjusz (240 p.)
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.

Podobne pytania

0 głosów
3 odpowiedzi 708 wizyt
pytanie zadane 18 czerwca 2017 w HTML i CSS przez rafal1997 Gaduła (3,170 p.)
0 głosów
2 odpowiedzi 117 wizyt
0 głosów
4 odpowiedzi 132 wizyt
pytanie zadane 1 grudnia 2018 w HTML i CSS przez Piotr Jarema Użytkownik (530 p.)
Porady nie od parady
Publikując kody źródłowe korzystaj ze specjalnego bloczku koloryzującego składnię (przycisk z napisem code w edytorze). Nie zapomnij o ustawieniu odpowiedniego języka z rozwijanego menu oraz czytelnym formatowaniu kodu.Przycisk code

65,683 zapytań

112,321 odpowiedzi

237,045 komentarzy

46,657 pasjonatów

Przeglądających: 245
Pasjonatów: 11 Gości: 234

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...