Nie wiem dlaczego strona nie jest responsywna

Question

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;
  }
}

 

Comments

Proszę wstawić problematyczny kod w odpowiednie bloczki → https://forum.pasja-informatyki.pl/faq#jak-wstawic-kod-zrodlowy

Answer 1

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ę

Comments

@kubag24h kod dodany

:D

 

 

---

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

---

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

---

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

---

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;
}

. . .