HTML i CSS: Responsywność #169
Conversation
devmentor-pl
left a comment
devmentor-pl
left a comment
There was a problem hiding this comment.
Natalio,
Zadania są ok 👍
Zostawiłem parę drobnych uwag do poprawienia ;)
| border: 150px solid #dcdcdc; | ||
| border-right-color: transparent; | ||
| border-bottom-color: transparent; | ||
| shape-outside: polygon(0 0, 0% 100%, 100% 0); |
| max-width: 1200px; | ||
| margin: 0 auto; | ||
| } | ||
| } |
| <source srcset="assets/img1200.jpg" media="(min-width: 1200px)" /> | ||
| <source srcset="assets/img600.jpg" media="(min-width: 600px)" /> | ||
| <source srcset="assets/img300.jpg" /> | ||
| <img src="assets/img.jpg" alt="Fallback image" /> |
There was a problem hiding this comment.
Czy można coś zrobić z tym odstępem na mobile? ;>
There was a problem hiding this comment.
@devmentor-pl Nie widzę screenshota, chociaż być może wiem o co chodzi 🤓
There was a problem hiding this comment.
Mam nadzieje, że teraz się dołączy :P
There was a problem hiding this comment.
@devmentor-pl Ok, to było wnikiem tego, że img docelowo byl inline. Zauważyłam też, że na tablecie obrazek nie wypełniał całego obramowania - dodałam więc aspect-ratio. Teraz już mam nadzieję wszystko jest ok ;)
| <a href="#">start</a> | ||
| </li> | ||
| <li class="menu-item"> | ||
| <a href="#">oferta</a> |
There was a problem hiding this comment.
Chyba na wersji desktopowej tracimy :hover (podczas wolnego przesuwania kursora) - jak to naprawić?
There was a problem hiding this comment.
@devmentor-pl Chodzi Ci o to, że na desktopie nie da się najechać kursorem na elementy w submenu, czyli "strony internetowe" i "pozycjonowanie stron www"? Jeśli tak, to faktycznie, ale u mnie nie da się zarówno podczas wolnego przesuwania kursora jak i podczas normalnego przesuwania kursora - już to naprawiłam. Chyba, że jeszcze o coś innego chodziło?
| nav > ul { | ||
| padding: 20px 10px; | ||
| } | ||
| li { | ||
| padding: 10px; | ||
| } |
There was a problem hiding this comment.
Zdecydowanie łatwiej jest stylować po klasach - wtedy łatwiej ocenić jaki styl przypisujemy do konkretnego elementu. W tym rozwiązaniu łatwo się pomylić i dłuże trwa potem cały proces.
There was a problem hiding this comment.
Wydawało mi się, że te style są na tyle ogólne, że mogę stylować po elementach zamiast po klasach. Ale będę to miała na uwadze.
There was a problem hiding this comment.
Tutaj może być istotny nawyk. Jak robić to od początku tak jak należy :) Potem ktoś "nowy" będzie chciał coś dodać i uzna, że powinien trzymać się obecnego stylu i już poleci całość ;P
There was a problem hiding this comment.
Dodałam klasę do <ul> i ostylowałam tę klasę, żeby uniknąć nav > ul, ale w sumie nie wiem, czy chodziło Ci tylko o te zagnieżdżone elementy, czy wszystkie powinnam stylować po klasach? Czyli w ogóle nie powinnam mieć styli typu:
ul {
...ogólne style dla ul ...
}
?
| </div> | ||
| </footer> | ||
| </body> | ||
| </html> |
| <source srcset="assets/img1200.jpg" media="(min-width: 1200px)" /> | ||
| <source srcset="assets/img600.jpg" media="(min-width: 600px)" /> | ||
| <source srcset="assets/img300.jpg" /> | ||
| <img src="assets/img.jpg" alt="Fallback image" /> |
There was a problem hiding this comment.
Mam nadzieje, że teraz się dołączy :P
| <a href="#">start</a> | ||
| </li> | ||
| <li class="menu-item"> | ||
| <a href="#">oferta</a> |
| nav > ul { | ||
| padding: 20px 10px; | ||
| } | ||
| li { | ||
| padding: 10px; | ||
| } |
There was a problem hiding this comment.
Tutaj może być istotny nawyk. Jak robić to od początku tak jak należy :) Potem ktoś "nowy" będzie chciał coś dodać i uzna, że powinien trzymać się obecnego stylu i już poleci całość ;P
devmentor-pl
left a comment
devmentor-pl
left a comment
There was a problem hiding this comment.
Natalio,
Teraz jest super! :)
| list-style: none; | ||
| } | ||
| nav > ul { | ||
| .menu { |
| /* mobile css */ | ||
| img { | ||
| display: block; | ||
| } |
| .p { | ||
| border-color: #ffffba | ||
| border-color: #ff00bb; | ||
| aspect-ratio: 4/3; |
2 participants
Zadania 1-5