/* rem and em do NOT depend on html font-size in media queries! Instead, 1rem = 1em = 16px */
/*Κάνεις χρήση em καθώς έχουν λιγότερα error*/
/*Laptop HD screens 1366px θα διαλέξουμε μια τιμή μεταξύ 1300px-1366px καθώς αυτή είναι πιο συνηθές κλιμάκα για laptop screens το 1300px επειδή αυτό είναι το πλάτος του .hero*/
/*FOR LAPTOP SCREENS BELOW 1344px οπότε 1350/16-->84em μετά απο round βγάζεο 1344px */
@media (max-width: 84em) {
.hero {
max-width: 120rem;
}
/*Μετά την αλλαγή του πλάτος στο hero γίνεται breakline*/
.heading-primary {
font-size: 4.4rem;
}
/*Οι φωτογραφίες μοιάζουν αρκετά μικρές όποτε της μεγαλώνουμε βάζωντας 2 στήλες στην κάθε σειρά αντι για 3*/
.gallery {
grid-template-columns: repeat(2, 1fr);
}
}
/*Για οθόνες tablet χρησιμοποιούμε συνήθως τιμές όπως 1200px για Landscape tablets καθώς κάτω από 1200px πάμε για mobile κλιμάκα επίσης εδώ δεν είναι ορατό που σπάει το design συνεπώς 1200px είναι η πιο σωστή επιλογή*/
/*FOR TABLET SCREENS BELOW 1200px οπότε 1200/16-->75em */
@media (max-width: 75em) {
/* Η ολική σελίδα μοιάζει σε 100% πολύ μεγάλη παρότι το @media δεν δέχεται το html font-size ο selector μέσα σε αυτό τον δέχεται για να μειωθούν αυτόματα όλα τα μεγέθη */
html {
/*Πας ένα βήμα πίσω 10 σε 9/16--->*/
font-size: 56.25%;
}
/*Ο steps component έχει μεγάλη απόσταση μεταξύ τις στήλες που παίρνει από το reusable .grid πριν ήταν
column-gap: 6.4rem;
row-gap: 9.6rem;*/
.grid {
/*Θα πας ένα βήμα πίσω*/
column-gap: 4.8rem;
/*2 βήματα πίσω καθώς ήταν πολύ το 9.6rem*/
row-gap: 6.4rem;
}
/*Μικραίνεις τα headers καθώς φαίνονται μεγάλα δες steps component*/
.heading-secondary {
/*Αφού θέσεις το html font-size 1rem=9px πας με βάση την λογική 1rem=10px παρότι δεν ισχύει καθώς 1rem=9px αλλά αυτή η λογική φέρνει το πιο ομοιόμρφο αποτέλεσμα*/
/*Για να στο εξηγήσω απλά 3.6rem * 9--->?3.2rem όχι 36px*/
/*Ένα βήμα πίσω από το h1*/
font-size: 3.6rem;
}
.heading-teritary {
/*Ένα βήμα πίσω από το h2*/
font-size: 2.4rem;
}
/*Το header σου όπως αναφέρθηκε προηγούμενος έχει παραπάνω padding: 0 4.8rem σε σχέση με το hero οπότε για να τα φέρεις στο ίδιο πλάτος*/
.main-header {
/*ιδιο πλάτος όπως το hero*/
padding: 0 3.2rem;
}
/*Ένα βήμα πίσω από 4.8rem*/
.main-nav-list {
gap: 3.2rem;
}
/*Θα μειώσεις το gap σε όλα τα grid αρκετά το ίδιο ισχύει και για το .hero*/
.hero {
gap: 4.8rem;
}
/*Το ίδιο ισχύει και για το testimonial*/
/*Στο testimonial container είχες padding:9.6rem αυτό είναι υπερβολικο*/
.testimonial-container {
/*Επειδή συμπιέζονται οι στήλες με τα testimonials θα αλλάξεις το padding μόνο δεξιά και αριστερά μειώνοντας το για να έχουν χώρο τα testimonials*/
padding: 9.6rem 3.2rem;
}
}
/*Το επόμενο media query που θες να είναι 900px καθώς πρέπει να ελέγχεις τουλάχιστον 200-300px (rule of thumb)
1200-200 1200-300 αλλιώς θα έβαζες σε κάθε 50px αλλό breakpoint κσι αυτό είναι ΛΑΘΟΣ, οπότε για να πιάνεις μεγαλή κλίμακα πιάνεις από 200 με 300px πίσω από το προηγούμενο breakpoint*/
/*Παρατηρούμε ότι καθώς πλησιάζουμε τα 900px δημιουργείται νέο line break στο h1 συγκεκριμένα στα 923px οπότε θα διαλέξουμε μια τιμή πριν γίνει το σπάσιμο που θα είναι από 900px-940px για να πιάνουμε μεγαλύτερη κλίμακα*/
/*Δεν διαλέγεις πότε την συγκεκριμένη τιμή που γίνεται το σπάσιμο αλλά διαλέγεις μια τιμή πριν ακριβώς γίνει για αυτό προεκυψε και το 940px καθώς θα περιλαμβάνει και το 923px που γίνεται το σπάσιμο*/
/*Υστερά από ανάλυση καταλήξαμε ότι θέλουμε μια τιμή στην κλιμακα 900-940px συνεπώς θα βάλουμε 940px και δεν υπάρχει πρόβλημα*/
/*940/16-->58.75 σε round 59 αρά 59*16=944px που και αυτό μας κάνει οριακά*/
/*FOR PORTRAIT TABLET SCREENS BELOW 940px οπότε 940/16-->59em */
@media (max-width: 59em) {
/*Θα μικρύνεις το όλικο μέγεθος της σελίδας*/
html {
/* 8/16-->50% πριν είχες 9 οπότε ένα βήμα πίσω */
font-size: 50%;
}
/*Θα αλλάξεις το design στο hero*/
.hero {
grid-template-columns: 1fr;
/*Πάει στο κέντρο inline-block elements δηλαδή και την φωτογραφία*/
text-align: center;
/*Για να μην είναι stretch το text μέσα στο hero*/
padding: 0 8rem;
}
/*Μπορούσες επίσης να κάνεις
.hero-box,
.hero-img-box {
text-align: center;
}
*/
/*Η φωτογραφία είναι πολύ μεγάλη θα την μικρύνεις*/
.hero-img {
width: 60%;
}
/*Το delivered-meals είναι flex containter όποτε για να το φέρεις στο κέντρο θα κάνεις justify-content:center;*/
.delivered-meals {
justify-content: center;
/*Θα κάνεις override το margin-top:8rem για να φαίνεται πιο κοντά στο κείμενο το delivered meals*/
margin-top: 3.2rem;
}
/*Όπως ανάφερθηκε προηγούμενος πρέπει να κοιτάς 200 και 300px πίσω το ίδιο ισχύει και για τους component δηλαδή αν σπάει ένας component στα 800px θα πρέπει να τον διορθώσεις στα 900px breakpoint*/
.logos img {
/* Θα μειώσεις το μέγεθος στα sponsor logos από 3.2rem σε 2.4rem καθώς σπάνε*/
height: 2.4rem;
}
/*Το ίδιο ισχύει και για το step-num από 8.6rem σε 7.4ren*/
.step-num {
font-size: 7.4rem;
}
/*Επίσης ισχύει και για το padding στο meal-box*/
.meal-box {
/* Είχες padding: 3.2rem 4.8rem 4.8rem 4.8rem; */
/*Αυτό διορθώνει το breakline στο meal-title*/
padding: 2.4rem 3.2rem 3.2rem 3.2rem;
}
/*Ότι έκανες στο hero θα κάνεις και στο testimonials grid καθώς αλλάζει το design σε potrait mode*/
.section-testimonials {
grid-template-columns: 1fr;
}
/*Θα αλλάξεις επίσης το αριθμό με τις στήλες στο gallery για να μοιάζουν πιο μικρές οι φωτογραφίες*/
.gallery {
grid-template-columns: repeat(6, 1fr);
}
/*Θα κάνεις potrait design και το cta-form*/
.cta-form {
grid-template-columns: 1fr;
}
/*Λόγο proximity θες όλα τα πεδία στην form να έχουν την ίδια απόσταση οπότε θα δώσεις ένα marign-top ισό με το padding των πεδίων που είναι 1.2rem*/
.btn--form {
margin-top: 1.2rem;
}
/*Mobile Navigation*/
/*Εφόσον έχεις βάλει το button στην style.css μαζί με τα icons τώρα πρέπει να το εμφανίσεις μέσα στο συγκεκριμένο breakpoint*/
.btn-mobile-nav {
/*Εμφανίζει το mobile-button και το menu-icon*/
display: block;
}
/*Βάζεις πάντα το parent-container ένος absolute element σε position:relative αλλιώς δεν θα δουλεύει το overlfow-x στην html και το body*/
.main-header {
position: relative;
}
/*Θέλεις όλο το mobile navigation να πιάνει όλο το viewport σε ύψος vh και σε width και θες να το βγάλεις μέσα από το header κάνοντας absolute εκτός του flow*/
.main-nav {
height: 100vh;
width: 100%;
position: absolute;
/*Πάντα όταν έχεις ένα absolute στοιχείο φροντίζεις να βάλεις κάποιες τιμές σε top,right κτλπ*/
top: 0;
right: 0;
/*Θες το navigation να είναι οριακά διάφανο*/
background-color: rgba(255, 255, 255, 0.97);
/*Επειδή δεν είναι στο κέντρο το navigation θα το κάνεις flex-container και θα το φέρεις στο κέντρο με το γνωστό τρικ*/
display: flex;
align-items: center;
justify-content: center;
/*Το display:none ακυρώνει το transition όποτε θα το κρύψεις με άλλο τρόπο*/
/*Μην φαίνεσαι στους screen-readers*/
visibility: hidden;
/*Μην κλικάρεσαι*/
pointer-events: none;
/*Μην φαίνεσαι ορατά στην οθόνη*/
opacity: 0;
/*Απαλό εφε για 5 nano second*/
transition: all 0.5s ease-in;
/*Πήγαινε τέρμα δεξιά όταν δεν είσαι ενεργό*/
transform: translateX(100%);
}
/*Βάλε τα links μέσα στο navigation να είναι το ένα κάτω από το άλλο*/
.main-nav-list {
display: flex;
flex-direction: column;
gap: 4.8rem;
}
/*Δώσε font-size στα links για να είναι μεγαλύτερα*/
.main-nav-link:link,
.main-nav-link:visited {
font-size: 3rem;
}
/*Αν έχεις την class nav-open μέσα στο header τότε το .main-nav του nav-open να είναι ορατό και να κλικάρεται*/
/*Descentant trick selector όποτ αν το .nav-open που είναι second-class το header έχει παιδί το .main-nav τότε να το εμφανίσεις αν δεν υπάρχει το second-class τότε να μην εφανίζεται*/
.nav-open .main-nav {
opacity: 1;
visibility: visible;
pointer-events: all;
/*reset φέρε το εκεί που ήταν στο κέντρο*/
transform: translateX(0);
}
/*Τώρα με την χρήση attribute selector θα επανεμφανίσεις το close παρά μόνο αν ισχύει .mav-open μέσα στο header παρόμοια κατάσταση με το accordeon*/
/*Δεν υπάρχει πρόβλημα στα display για τα button καθώς δεν έχουμε κάποιο εφε για αυτά*/
/*Αν ισχύει .nav-open .main-nav τότε κρύψει το menu-icon*/
.nav-open .icon-mobile-nav[name="menu-outline"] {
display: none;
}
/*Επανεμφάνισε το close-icon αν υπάρχει το .nav-open στο header*/
.nav-open .icon-mobile-nav[name="close-outline"] {
display: block;
}
}
/*Τα βήματα στα γρήγορα για το mobile-navigation
1)Φτιάχνεις ένα btn element μέσα στο header που θα έχει μέσα τα 2 icon ανταποκρίσης
2)Δίνεις στυλ και κρύβεις το button εκτός breakpoint το ίδιο ισχύει και για το στυλ των icon και το close-icon καθώς δεν θες να φαίνεται σε deafult συνθήκες
3)Εμφανίζεις το btn display:block μέσα στο breakpoint
επίσης κάνεις το στυλ και στο main-nav με flex φέρνοντας στο κέντρο και με absolute και το κρύβεις χωρίς display:none και κάνεις τα links κάθετα με flex επίσης
4)Δίνεις nav-open στο header και όταν έχεις nav.open .main-nav επαναεμφανίζεις το main-nav
5)Κρύβεις με attribute selector το menu icon και εμφανίζεις το close icon για κάθε φορά που .nav-open .main-nav
*/
/*Το επόμενο breakpoint θα είναι 200-300px πίσω από το προηγούμενο πριν είχες 900px πηγαίνωντας 200px πίσω πρέπει να εντοπίσεις αν σπάει σε line-break η σε component το design σου*/
/*Υστερά από έλεγχο φαίνεται ότι το design σου σπάει κάπου στα 800-700px πριν είχες 940px τώρα λόγο του design και λόγο με μικρότερα tablets ψάχνεις μια τιμή κοντά στα 700px*/
/*FOR Smaller TABLET SCREENS BELOW 700px οπότε 700/16-->44em */
@media (max-width: 44em) {
/*Έχεις κάνει reusable χρήση για τα grid--3-cols και grid--4-cols αυτό μπορείς να το εκμεταλευτείς καθώςθες λόγο χώρου να κάνεις τα components που έχουν 3στήλες και 4στήλες να έχουν μόνο 2*/
/*Αυτό διοθρώνει το θέμα χώρου όπως επίσης φτιάχνει τα meals και τα feature-blocks ακόμα και κάνωντας έλεγχο 300px πίσω*/
.grid--3-cols,
.grid--4-cols {
grid-template-columns: repeat(2, 1fr);
}
/*Το heading secondary έχει πολύ margin-bottom θα το μειώσεις*/
.heading-secondary {
/*Το κάνεις μισό του 9.6rem*/
margin-bottom: 4.8rem;
}
/*Θα μπορούσες επίσης να μικρύνεις το .step-num και να μειώσεις το margin-bottom στο heading-teritary*/
/*Θέλεις να πας στο κέντρο το diets στο meals-section για καλύτερο optical-flow για να το κάνεις αυτό πρέπει να του δώσεις πρόσβαση μέσω του span στο grid-container αλλιώς δεν μπορείς να κάνει justify-self:center*/
.diets {
/*Παρε από την 1η εως την τελευταία στήλη επεκτάση στο grid-container*/
grid-column: 1/-1;
/*Πήγαινε συγκεκριμένα στο κέντρο του grid*/
justify-self: center;
}
/*Θα αλλαξείς το width του meal-plan καθώς στο 75% σε μικρότερες οθόνες σπάει κάνε το 100%*/
.plan {
width: 100%;
}
/*Θες να βάλεις όλα τα navigation-cols πάνω και από κάτω να είναι το logo και το adress col που δεν έχουν navigation*/
/*Θα πειράξεις το grid--footer καθώς δεν φαίνεται σε μικρότερες οθόνες λόγο του overflow-x συνεπώς πρέπει να κάνεις κάτι για αυτό*/
.grid--footer {
/*Αυτή η μέθοδος σου αφήνει ένα κένο grid-cell και δεν εκμέταλευεσαι στον χώρο σωστά για τις 2 τελευταίες στήλες*/
/* grid-template-columns: 1fr 1fr 1fr; */
/*Αντιθέτως θα το σπάσεις σε ένα ζυγό όπως το 6 και θα το κατανομήσεις σωστά*/
grid-template-columns: repeat(6, 1fr);
}
.nav-col {
/*Να πάνε οι στήλες nav στην 1η σειρά*/
grid-row: 1;
/*Από το grid που έκοψα κάθε στήλη nav-col να πιάνει 2 στήλες*/
/*Επειδή έχεις κοινή class θα το κάνεις μέσω του span γιατί βολεύει και όχι μέσω grid-lines όπως 1/3 πχ*/
grid-column: span 2;
}
/*Τώρα για τις στήλες logo και address θέλω να πιάνουν 3 στήλες αυτό το κάνεις μέσω του span που σημαίνει επεκτάση το να κάνεις 1/-1 η 1/4 δεν μπορεί να λειτουργήσει εδώ καθώς αυτό είναι τιμές συντεταγμένες που είναι συγκεκριμένα ενώ με το span του λες οπου υπάρχει χώρο πιάσε span 3*/
/* .logo-col,
.contacts-col {
grid-column: span 3;
} */
/*Μπορείς να το κάνεις και ξεχωριστά έτσι αν θες span 3 διαλέγεις από την γραμμή 1 εως την 4 τις κάθετες για τις στήλες*/
.logo-col {
grid-column: 1/4;
}
/*Μπορείς να διαλέξεις ένα grid-line που τελειώνει το span μιας άλλης στήλης*/
.contacts-col {
grid-column: 4/-1;
}
/*Το grid σου έχει 2 σειρές και 6 στήλες στην κάθε σειρά
αυτό σημαίνει ότι έιναι ένα grid 2*6 σωστά. Άρα σε κάθε σειρά που έχεις 3-nav αυτά πιάνουν 2 στήλες το καθένα καθώς 3*2=6 κσι στην κάτω σειρά που έχεις το logo και το address πιάνουν 3 στήλες καθώς 3*2=6* και έτσι εκμεταλεύεσαι τον χώρο σε ένα asymetric grid/
Πιο απλά κάθε στήλη σπάει σε 2 στήλες για πάνω και σε 3 για κάτω
/*Επίσης το συγκεκριμένο grid είναι ασυμετρικό λόγο το ότι διαφορετικό περιεχόμενο αρά και διαφορετικό πλάτος σε κάθε στήλη αυτό το οργανώνεις όπως είδες πιο πάνω*/
}
/*Αν θες να επεκτείνεις μια στήλη σε 2 grid-lines μέσω δεν θα κάνεις 1/2 αυτό σημαίνει πιάσε το grid-line 1 και 2 στις στήλες αυτό είναι μη λειτουργικό καθώς ένα grid-cell αποτελείται τουλαχιστόν από 2 grid-lines στις στήλες που το σχηματίζουν άρα αυτό δεν γίνεται σε αντίιθεση με το 1/3*/
/*Για να σημειωθεί η διαδικασία για το πως διαλέγεις σωστά ένα breakpoint είναι πολύ απλό, το πρωτό βήμα είναι να πας τουλάχιστον 200px-300px από το προηγούμενο breakpoint, εφόσον δεις που σπάει το design σου παίρνεις μια standard τιμή όπως πχ 900px και βλέπεις ότι έχεις σπάσιμο στα 923px για tablet potrait συνεπώς ψάχνεις κάτι από 900-923px αλλά δεν θα διαλέξεις τα 923px που ακριβώς γίνεται το σπάσιμο αλλά λίγο πιο πάνω πχ 940px οπότε είσαι στα 900-940px */
/*Ποτε δεν διαλέγεις την τιμή που γίνεται το σπασιμό ακριβώς αλλά πάντα λίγο πιο πάνω για να μπορείς να έχεις μεγαλύτερη κλιμάκα για παράδειγμα το 923px που γίνεται το σπάσιμο συμπεριλαμβάνεται μέσα στο 900-940px*/
/* max-width σημαίνει από 0-τιμή breakpoint */
/*Αφού διαλέξεις το breakpoint και φτιάξεις όλα τα σπασίματα στο design αυτό δεν είναι αρκετό καθώς τα σπάσιματα δεν θα πρέπει να υπάρχουν κάτω 150px-200px αυτό σημαίνει ότι αν έχεις 940px breakpoint τα σπασίματα που έχεις φιτάξει να ισχύουν στα 750-800px, αυτό θα γίνει και στο mobile που ακολουθεί*/
/*Για να διαλέξεις mobile-screen θα πας 200-300px από το προηγούμενο breakpoint που είναι 700px οπότε 700-200->500*/
/*Υστερά από ανάλυση καταλήξαμε ότι το design σπάει στα 500px παρόλαυτα θα διαλέξουμε τα 540px ως breakpoint καθώς αυτό είναι το σημείο που είναι πιο απόδεκτο λίγο πριν σπάσει με αποτέλεσμα να πιάνουμε την κλίμακα από 0-540px που συμπεριλαμβάνει και τα 500px*/
/* (Υστερά από round βγαίνει 544px για να μην είναι δεκαδικό) */
/*Standard τιμή για mobile είναι 600px αλλά επειδή είχαμ πριν 704px δεν θα κάνουμε breakpoint για 100px διαφόρα οπότε πάμε να δουμε που σπάει*/
/*FOR MOBILE SCREENS BELOW 544px οπότε 550/16-->34em (round)*/
@media (max-width: 34em) {
/*Επειδή έχουμε να κάνουμε με πολύ μικρό χώρο θα ήταν καλό να κάνουμε όλα τα reusable grid με 2 εως 4 στήλες να έχουν μόνο μία στήλη όπως κάναμε και πιο πάνω για τα reusable grid με 3-4 στήλες*/
.grid--2-cols,
.grid--3-cols,
.gird--4-cols {
grid-template-columns: 1fr;
}
/*Θα μικρύνεις το row-gap στο reusable-grid .grid δες step-section από 6.4rem θα το κάνεις 4.8rem*/
.grid {
row-gap: 4.8rem;
}
/*Επίσης πρέπει να διορθώσουμε και τα sponsor logos καθώς χάνωνται σε μικρότερα viweports*/
.logos img {
height: 1.2rem;
}
.section-hero {
/*Μειώνεις το padding στο section-hero που είχε 4.8rem πάνω και 9.6rem κάτω πηγαίνωντας ένα βήμα πίσω*/
padding: 2.4rem 0 6.4rem 0;
}
/*Υπαρχει υπερβολικό padding στο hero*/
.hero {
/*Κάνεις overide το padding 8rem δεξια και αριστερά που είχες βάλει για να μην γίνεται stretch το text*/
padding: 0 3.2rem;
}
.btn,
.btn:link,
.btn:visited {
/*Θες τα κουμπιά να κλικάρονται ευκόλα οπότε θα τα κάνεις πιο ψηλά και πιο στενά στις άκρες*/
padding: 2.4rem 1.6rem;
}
/*Η φωτογραφία από προηγούμενο breakpoint 60% μοιάζει αρκετά μικρή θα την μεγαλώσεις*/
.hero-img {
width: 80%;
}
/*Η λογική των steps θες να εμφανίζεται μια η φωτογραφία και μετά το κείμενο καθώς δεν επικρατούν πλέον 2 στήλες*/
/*Για να το κάνεις αυτό θα χρησιμοποιήσεις pseudo-class nth-child και θα αλλάξεις τις σειρές για παράδειγμα*/
/*Αν αναρωτιέσαι απο που ήρθε το 2 είναι επειδή το img-box είναι το 2 child του grid container αρά λες για το 2ο child του grid-container με το όνομα ταδε κάνε το εξής δες τα div στον κώδικα*/
/*στον αριθμό των παιδιών του στοιχείου και
όχι του αριθμού των παιδιών που έχει αυτή την κλάση εδώ αυτό σημαίνει ότι δεν καλείς τα child-elements του .step-img-box αλλά το ίδιο το step-img-box που είναι child ένος parent-element.*/
/*Έτσι δεν έχει καμία σχέση με το όνομα της κλάσης, εντάξει; */
.step-img-box:nth-child(2) {
grid-row: 1;
}
/*Τώρα θες το τελευταίο child του grid-container μπορείς να κάνεις*/
/* .step-img-box:last-child {
grid-row: 5;
} */
/*Αλλά εσυ θες το 6ο step-img-box μέσα στο grid συνεπώς βρίσκεται στην 6σειρά και θες να το πας στην πεμπτη*/
.step-img-box:nth-child(6) {
/*Έχω 6 σειρές πήγαινε το στην 5η σειρά αν έχεις 6 σειρές αρά έχεις 7 grid-lines ειναι πάντα +1*/
grid-row: 5;
}
.gallery {
/*Κάνεις τις φωτογραφίες 4 σε κάθε στήλη για να φαίνονται πιο μεγάλες*/
grid-template-columns: repeat(4, 1fr);
}
/*Τα testimonials πλέον πιεζόνται συνεπώς θα τα κάνεις και αυτά 1 grid*/
.testimonials {
grid-template-columns: 1fr;
}
/*Το ίδιο ισχύει και για το cta*/
.cta {
/*Αυτό θα εξαφανίσει την φωτογραφία επειδή η φωτογραφία δεν έχει height και δεν έχει content στην html ο λόγος που φαίνοταν πριν ήταν επειδή επαιρνέ το ίδιο το height του content μαζί με την φόρμα*/
grid-template-columns: 1fr;
}
.cta-text-box {
/*Θα μειώσεις το padding από 4.8rem σε 3.2rem*/
padding: 3.2rem;
}
/*Για να εμφανίσεις την φωτογραφία θα πρέπει να δώσεις height στο parent-container για παράδειγμα τώρα θα φαίνεται*/
.cta-img-box {
height: 36rem;
/*Βάλε την φωτογραφία να είναι πάνω από την form σαν ομορφή εισαγωγή άρα θα πάει στην (1η σειρα)*/
grid-row: 1;
}
/*Το img-box να πάει λίγο πιο κάτω ξοτά στον αριθμό για απόσταση για τον άξονα Υ χωρίς να πειράξεις το gap και να αλλάξει παντού για κάθε .grid*/
.step-img-box {
transform: translateY(2.4rem);
}
.logos {
flex-direction: column;
justify-content: center;
gap: 5rem;
}
.logos img {
height: 3.2rem;
}
}
/*Dev tools μπορείς να κλικάρεις στο responsive mode στις τρεις κουκίδες να διαλέξεις media-queries και να δεις την κλιμακά με τα breakpoint σου*/
/*Για τα breakpoints κοιτά διαδορα στο viweport για κάθε 100px*/
/*Πως βρίσκω breakpoint κρατάω μια standard τιμή πχ 900px ύστερα ψάχνω ανα 100px που σπαει το design μου σπάει πριν η μετά τα 900px αν σπάει μετά τα 900px τότε έχω μια κλίμακα από
standard τιμή εως σπάσιμο δεν διαλέγω πότε την τιμή που γίνεται το σπάσιμο αλλά +50px από εκει που γίνεται για να είναι αποδεκτό*/