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

Jak to ustawić?

VPS Starter Arubacloud
0 głosów
353 wizyt
pytanie zadane 27 czerwca 2018 w HTML i CSS przez Layoutowiec Mądrala (5,470 p.)
Witam!
 

Więc mam kolejny problem z moją stroną a dokładniej z jej RWD, ponieważ nawet na wersji znajdującej się na moim komputerze (bez dodatkowych banerów od hostingu) na mniejszym ekranie (360x640) można ciągle się poruszać na lewo i prawo mimo że wszystkie elementy mają ustawione width: auto i nic nie przekracza szerokości ekranu telefonu. I prosiłbym o pomoc dlaczego tak się dzieje.

Dziękuję za poświęcony czas!
komentarz 27 czerwca 2018 przez olekjs Gaduła (4,540 p.)
przeniesione 27 czerwca 2018 przez ScriptyChris
Ciężko stwierdzić gdzie popełniasz błąd. Dodaj kod..
komentarz 27 czerwca 2018 przez Tomek Sochacki Ekspert (227,510 p.)
Teoretycznie można dać overflow: hidden ale nie tak powinno się rozwiązywać ten problem... zobacz w inspektorze który element wychodzi Ci po za ekran i przyczynia się do powstania paska przewijania, może ma on jakiś margines czy padding przy jednoczesnym braku box-sizing: border-box dla niego itp.

Takie problemy rozwiązuje w 99% przypadków kontrola w narzędziach developerskich...
komentarz 27 czerwca 2018 przez Layoutowiec Mądrala (5,470 p.)
Właśnie problem w tym że poprawiłem wszystko i raczej nic nie wychodzi poza
2
komentarz 27 czerwca 2018 przez Tomek Sochacki Ekspert (227,510 p.)

Właśnie problem w tym że poprawiłem wszystko i raczej nic nie wychodzi poza

ehh... co poprawiłeś? Skoro pojawia się pasek przewijania to znaczy, że coś wychodzi i koniec kropka...

A sprawdzaleś w ogóle co pokazują narzędzia dev np. w Chromie? Proponuję w pierwszej kolejności sprawdzić menu i stopkę, a jeśli one są oki to kolejno pozostałe.Ty w ogóle korzystasz w tych swoich projektach z narzędzi dev Chroma czy innych tego typu?

komentarz 27 czerwca 2018 przez xlk Nowicjusz (160 p.)
a gdybyś ustalił takie coś jak max-width zamiast width:auto?
komentarz 28 czerwca 2018 przez Layoutowiec Mądrala (5,470 p.)
edycja 28 czerwca 2018 przez Layoutowiec

Kod html na stronie

Kod CSS:

 

@media (max-width: 360px) 
{
	.menu {height: auto; width: auto;}
	.yourph {height: auto; width: auto; }
	.yourname {height: auto; width: auto; }
	.textaboutme1  {display: table; text-align: center; }
	.textaboutme2 {width: 100%; text-align: left; float: left; }
	.ido1 {height: 100%; width: 100%; float: left; text-align: center; margin: 0%; background-color: #333a56;}
	.ido2 {height: 100%; width: 100%; float: left; text-align: center; margin-left: 0%; background-color: #333a56;}	
	.ido3 {height: 100%; width: 100%; float: left; text-align: center; margin-left: 0%; background-color: #333a56;}
    .ido4 {height: 100%; width: 100%; float: left; text-align: center; margin-left: 0%; background-color: #333a56;}
    .mlw {height: 1000px;  margin-top: 1000px; padding-top: 50%; margin-right: 0%; margin-left: 0%; 
          text-align: left; font-size: 20px; }
    .ms1 {width: auto; margin: 0%;}
    .md {width: auto; margin: 0%;}
    .mc1 {width: auto; margin: 0%; text-align: center;}
    .mc2 {width: auto; margin: 0%; text-align: left; padding-left: 10%;}
    .mc3 {width: auto; margin: 0%; text-align: left; padding-left: 10%;}
    .mm {width: auto; font-size: 15px; margin-top: 30%; margin-left: 0%; margin-right: 0%; margin-bottom: 0%;}
    .mb {width: auto; margin: 0%;}
    .contact {width: auto; margin: 0%;}
}

 

Edit: jakby co to sprawdziłem wszystko jeszcze 3 razy ale nie znalazłem co wystaje

1 odpowiedź

0 głosów
odpowiedź 28 czerwca 2018 przez Tomek Sochacki Ekspert (227,510 p.)

W nawiązaniu do kodu jaki dałeś w komentarzu, problemem jest div mający klasę "ms1" "My skills", który ma margin-left ustawiony na 31%. Gdy w narzędziach chroma usunę ten margines (wyłączę chwilowo tę właściwość css dla tego elementu) to pasek znika, więc tu jest odpowiedź.

Odpal sobie narzędzia dev i kolejno sprawdzaj elementy, próbuj np. zmniejszać ich wymiary czy cokolwiek, co może doprowadzić Cię do błędu.

Zlikwiduj ten margines lewy dla diva o klasie ms1 i będzie oki.

komentarz 28 czerwca 2018 przez Tomek Sochacki Ekspert (227,510 p.)
heh...  powiem Ci szczerze, że osobiście kupno szablonu do portfolio fronta uważam za totalną bzdurę... to ma być człowiek, który ma umieć sam tworzyć layouty itp. a tu soje cv robi na gotowcu.... ale no cóż... jak widać moja opinia jest bardzo subiektywna i wiele ludzi myśli inaczej... :)

Zauważ tylko, że w tym cv to pokazaleś jest dużo więcej komponentów do złożenia niż Ty oferujesz, fajne animacje itp. Także może w sumie jakbyś się postarał i zrobił na prawdę fajne to uda Ci się zarobić parę zł :)
komentarz 28 czerwca 2018 przez Layoutowiec Mądrala (5,470 p.)
A co myślisz że jeżeli teraz wszystko dokładnie zaplanuje pomyślę nad ciekawymi rozwiązaniami i zrobiłbym ciekawe portfolio dla fotografa

Tak BTW to wcześniej też się zdziwiłem że programiści zajmujący się robieniem stron internetowych kupują gotowe szablony
komentarz 28 czerwca 2018 przez Tomek Sochacki Ekspert (227,510 p.)
Dla fotografa może być ciekawe... pomyślałbym tylko nad jakimiś fajnymi galeriami z różnymi przejściami itp. Może np. jakaś wersja na flexie i druga na gridzie, gdzie można by jakoś ciekawie komponować zdjęcia itp.
komentarz 28 czerwca 2018 przez Layoutowiec Mądrala (5,470 p.)
Mozna by też zrobić różne style, galerie itd. Jeszcze nad tym pomyśle ale wydaje mi się że może to być dobry pomysł
komentarz 28 czerwca 2018 przez Layoutowiec Mądrala (5,470 p.)
A jeszcze wracając do tej strony na którą masz kod, mógłbyś ją ocenić pod względem kodu i napisać mi co robię źle i czego powinienem się jeszcze douczyć. Bardzo Proszę!

Podobne pytania

+1 głos
2 odpowiedzi 247 wizyt
pytanie zadane 20 czerwca 2018 w HTML i CSS przez Layoutowiec Mądrala (5,470 p.)
0 głosów
2 odpowiedzi 455 wizyt
pytanie zadane 16 czerwca 2018 w HTML i CSS przez Layoutowiec Mądrala (5,470 p.)
0 głosów
0 odpowiedzi 75 wizyt
pytanie zadane 24 marca 2021 w HTML i CSS przez tomich Nowicjusz (120 p.)

92,452 zapytań

141,262 odpowiedzi

319,080 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...