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?