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

question-closed CSS, autodopasowanie się zawartości treści do rozmiaru nośnika.

VPS Starter Arubacloud
+1 głos
436 wizyt
pytanie zadane 23 września 2020 w HTML i CSS przez Magus Nowicjusz (220 p.)
zamknięte 23 września 2020 przez Magus
Cześć ludzie, potrzebuję pomocy. Przepraszam za mało fachowe słownictwo, ale dopiero się uczę. :)

Zabrałam się za tworzenie pewniej aplikacji. Aktualnie jestem przy homepage. Wszystko wygląda tak jak chciałam, żeby wyglądało, poza drobnym szczegółem. Ta strona wygląda dobrze tylko na komputerze, na mniejszych nośnikach elementy żyją swoim życiem i nic nie jest tak jak być powinno.

 

Żeby to zmienić, w moim containerze dodałam klasę "box" do znajdujących się w nim elementów :

<div class="wrapper-home">
  <div class="box">
    <h1 class="font-headline">Lalalala</h1>
  </div>
  <div class="box">
    <div class="ellipse">
      <%= link_to new_item_path do %>
        <i class="fas fa-camera"> </i>
      <% end %>
    </div>
  </div>
  <div class="box">
    <h2>Scan a piece of clothing</h2>
  </div>

</div>

Następnie w pliku css, w którym znajdują się cechy poszczególnych elementów zakomentowałam wszystkie te cechy, które są związane z położeniem/ułożeniem tych elementów.

Po tym w css do mojego containara dodałam:
  display: grid;
  grid-template-columns: repeat(auto-fit 100px);
  grid-template-rows: repeat (2, 1fr);

Może pokażę cały ten plik css, żeby było wiadomo o co chodzi:

.wrapper-home {
  height: calc(100vh - 80px);
  background: #3B3A3A;
  display: grid;
  grid-template-columns: repeat(auto-fit 100px);
  grid-template-rows: repeat (2, 1fr);
  // grid-gap:20px;
}

.box {
  align-items: center;

 

}

.ellipse {
  position: relative;
  width: 297px;
  height: 297px;
  // left: 42%;
  // top: 230px;
  background: rgb(78, 212, 237);
  filter: drop-shadow(10px 14px 20px rgba(0, 0, 0, 0.03));
  border-radius: 100%;
  background: linear-gradient(351deg, #50d4f2, #c8e5ec, #adecfb, #e1ebee, #1685a7, #fd7b4a, #9afd4a, #fdf14a, #4a66fd, #fd634a, #fd4ad7, #7a0b19, #968385, #afec99, #39c8b7, #79eedf, #1406d2, #f2f707, #07f5f7, #f7072f, #d3b4d4, #d3b4d4, #732176, #a3d934, #b8fd9e, #07a396, #07a396);
  background-size: 5400% 5400%;
  -webkit-animation: AnimationName 10s ease infinite;
  -moz-animation: AnimationName 10s ease infinite;
  -o-animation: AnimationName 10s ease infinite;
  animation: AnimationName 10s ease infinite;
}

@-webkit-keyframes AnimationName {
  0%{background-position:0% 19%}
  50%{background-position:100% 82%}
  100%{background-position:0% 19%}
}
@-moz-keyframes AnimationName {
  0%{background-position:0% 19%}
  50%{background-position:100% 82%}
  100%{background-position:0% 19%}
}
@-o-keyframes AnimationName {
  0%{background-position:0% 19%}
  50%{background-position:100% 82%}
  100%{background-position:0% 19%}
}
@keyframes AnimationName {
  0%{background-position:0% 19%}
  50%{background-position:100% 82%}
  100%{background-position:0% 19%}
}

.ellipse .fas {
  font-size: 100px;
  color:white;
  // position: absolute;
  // margin-top: 100px;
  // margin-left: 100px;
}

.ellipse .fas .clickableAwesomeFont {
  cursor: pointer
}

  .wrapper-home h1{
 font-family: 'Do Hyeon';
 font-size: 64px;
 line-height: 80px;
 // text-align: center;
 color: #FFFFFF;
 // padding-top: 50px;
}

.wrapper-home h2 {

font-family: 'Vollkorn';
font-style: normal;
font-weight: normal;
font-size: 30px;
line-height: 42px;
// text-align: center;
// margin-top: 350px;
color: #FFFFFF;
}

 

I teraz zastanawiam się czy ja to poprawnie robię, czy może jest jakiś inny sposób na to i co mogę zrobić, żeby wszystkie elementy w poszczególnych boksach wyśrodkować i żeby były w tym samym ułożeniu niezależnie od tego czy są wyświetlane na iphonie czy laptopie. Pomożecie?
komentarz zamknięcia: Rozwiązałam zadanie.
1
komentarz 23 września 2020 przez Magus Nowicjusz (220 p.)
OK, chyba mi się udało w css do klasy "box" dodałam:

 

display: flex;
align-items: center;
justify-content: space-around;

Btw, w tytule zadania miało być "zawartości strony", a wyszło  masło maślane.

Pozdrawiam :)
komentarz 23 września 2020 przez VBService Ekspert (251,270 p.)
komentarz 23 września 2020 przez ScriptyChris Mędrzec (190,190 p.)
edycja 23 września 2020 przez ScriptyChris

@Magus, jeśli rozwiązałaś problem to zamknij proszę temat.

komentarz 23 września 2020 przez VBService Ekspert (251,270 p.)

Zabrałam się za tworzenie ...
... tak jak chciałam, żeby ...
... dodałam klasę ...
... elementów za komentowałam wszystkie ...

chyba raczej,  wink

jeśli rozwiązałaś problem to zamknij proszę temat. 

komentarz 23 września 2020 przez Magus Nowicjusz (220 p.)

OK, ale jak mam to zrobić, bo nie widzę tutaj takiej opcji. surprise

1
komentarz 23 września 2020 przez ScriptyChris Mędrzec (190,190 p.)

@VBService, edytowałem. Czasami bezosobowa forma jest bezpieczniejsza :)

Podobne pytania

+1 głos
3 odpowiedzi 359 wizyt
0 głosów
2 odpowiedzi 282 wizyt
0 głosów
0 odpowiedzi 194 wizyt

92,455 zapytań

141,263 odpowiedzi

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

...