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

Nie wiem dlaczego strona nie jest responsywna

VPS Starter Arubacloud
0 głosów
356 wizyt
pytanie zadane 19 maja 2021 w HTML i CSS przez DEWOREK Nowicjusz (190 p.)
edycja 19 maja 2021 przez DEWOREK

Wiem Rże Dla Niektórych To Może Być Mega Proste i ten, Ale Ja w miarę zaczynam z HTML mam pewien problem nie potrafię dostosować strony żeby na każdym monitorze była taka sama, a nie się rozszerzała ogólnie to żeby strona była tego wzrostu co ja chcę, a nie się do monitora dostosowywała, a że jestem nowym w HTML, a w CSS tym bardziej tutaj podsyłam o co cho.

tak ma wyglondac : imgur.com/a/ROVFkj0

a nie tak : https://imgur.com/a/JvxNLYm
"Oczywiście zepsułem to tak że jak odpale to na większym monitorze, to będzie większe, ale to raczej Idze się domysilic"

 

.u-section-1 {
  background-image: none;
}
 
.u-section-1 .u-sheet-1 {
  min-height: 675px;
}
 
.u-section-1 .u-btn-1 {
  border-style: none;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 1px;
  animation-duration: 1000ms;
  background-image: none;
  margin: 542px auto 0 498px;
  padding: 9px 40px 11px 39px;
}
 
.u-section-1 .u-btn-2 {
  border-style: none;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 1px;
  animation-duration: 1000ms;
  background-image: none;
  margin: -42px 302px 0 auto;
  padding: 9px 40px 11px 39px;
}
 
.u-section-1 .u-btn-3 {
  border-style: none;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 1px;
  animation-duration: 1000ms;
  background-image: none;
  margin: -42px auto 60px 288px;
  padding: 9px 40px 11px 39px;
}
 
@media (max-width: 1199px) {
  .u-section-1 .u-btn-1 {
    margin-left: 298px;
  }
 
  .u-section-1 .u-btn-2 {
    margin-right: 102px;
  }
 
  .u-section-1 .u-btn-3 {
    margin-left: 88px;
  }
}
 
@media (max-width: 991px) {
  .u-section-1 .u-btn-1 {
    margin-left: 78px;
  }
 
  .u-section-1 .u-btn-2 {
    margin-right: 0;
  }
 
  .u-section-1 .u-btn-3 {
    margin-left: 0;
  }
}
 
@media (max-width: 767px) {
  .u-section-1 .u-btn-1 {
    margin-left: 0;
  }
}

 

komentarz 19 maja 2021 przez ScriptyChris Mędrzec (190,190 p.)
Proszę wstawić problematyczny kod w odpowiednie bloczki → https://forum.pasja-informatyki.pl/faq#jak-wstawic-kod-zrodlowy

1 odpowiedź

+3 głosów
odpowiedź 19 maja 2021 przez Cixo Gaduła (4,070 p.)
Hej!

Witaj na forum to po pierwsze. Co do tematu, to trudno mi wyrokować nie znając kodu, ale co masz w height tego elementu z z obramowaniem? Jeżeli możesz wstaw kod do pytania to znacznie ułatwi sprawę
komentarz 20 maja 2021 przez DEWOREK Nowicjusz (190 p.)

@kubag24h kod dodany

:D

 

 

komentarz 20 maja 2021 przez Cixo Gaduła (4,070 p.)

więc tak, zmień u-sheet-1 z min-height:675px na height:100vh, to przypisze jej 100% wysokości ekranu, czyli jeżeli dobrze rozumię to, o co Ci chodzi. Jeżeli mogę coś ci wskazać, to łatwej może wprowadzać Ci się późniejsze poprawki, jeżeli użyjesz ',' zamiast kopiowania, w kursach na początku czasem zapominają dokładnie wszyskie operatory przedstawić, ',' działa tak że wywmieniać wszyskie elementy na jakie mają działać reguły, przez co nie musisz kopiować, dla twojego przykładu:

.u-section-1 .u-btn-1, .u-section-1 .u-btn-2, .u-section-1 .u-btn-3{

}

Po czym jedynie margines ustawiasz dla każdego z osobna, przez co kod jest krótszy i czytelniejszy jak i modyfikację można zrobić w tylko jednym miejscu nie trzeba w 3

komentarz 20 maja 2021 przez DEWOREK Nowicjusz (190 p.)

Dzięki za odpowiedź rzeczywiście tak będzie łatwiej. wink

komentarz 20 maja 2021 przez DEWOREK Nowicjusz (190 p.)

@kubag24h,        Dzięki działa tak o to chodziło.   cheeky

komentarz 20 maja 2021 przez VBService Ekspert (251,210 p.)
edycja 20 maja 2021 przez VBService

Dodać trzeba do tego co @kubag24h, napisał, możesz użyć: 

multiple classes on single element html

 

<button class="u-btn u-btn-1">Radio</button>
<button class="u-btn u-btn-2">Radio</button>
<button class="u-btn u-btn-3">Radio</button>

. . .

.u-section-1 .u-btn {
  border-style: none;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 1px;
  animation-duration: 1000ms;
  background-image: none;
  padding: 9px 40px 11px 39px;
}

.u-section-1 .u-btn-1 {
  margin: 542px auto 0 498px;
}
.u-section-1 .u-btn-2 {
  margin: -42px 302px 0 auto;
}
.u-section-1 .u-btn-3 {
  margin: -42px auto 60px 288px;
}

. . .

 

Podobne pytania

0 głosów
4 odpowiedzi 628 wizyt
0 głosów
1 odpowiedź 592 wizyt
pytanie zadane 12 września 2017 w HTML i CSS przez Mateusz Patalan Bywalec (2,140 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 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!

...