კურსის დასრულების შემდეგ შეძლებთ HTML CSS-ით ააწყოთ კომპლექსური ვებ გვერდები.
მოცემულ ვიდეოში ვაწყობთ მობილურ ნავიგაციას, ჩვენი header-ისთვის
/* laptops */
@media screen and (max-width: 992px) {
....
}
/* tablets */
@media screen and (max-width: 768px) {
....
/* mobile menu styles */
header {
position: relative;
}
header .mobile-menu {
display: flex;
gap: 0 5px;
cursor: pointer;
padding-block: 15px;
}
header nav {
display: none;
}
header nav.active {
display: flex;
position: absolute;
background: var(--sky);
width: 100%;
top: 100%;
left: 0;
flex-direction: column;
padding-block: 15px;
}
header nav.active > div {
display: flex;
flex-direction: column;
text-align: center;
}
header nav.active a {
padding: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
header nav.active > div:last-child a:last-child {
border-bottom: 0;
}
header > .container {
justify-content: space-between;
}
footer {
height: initial;
}
}
/* mobile phones */
@media screen and (max-width: 576px) {
...
}
კომენტარები 4
ვალერი ხარიტონაშვილი
სავარაუდოდ დამავიწყდა ბოლო კომიტის გაკეთება, კომპიუტერში ვეძებე პროექტი, მაგრამ ვერ ვიპოვე, მგონი წავშალე
კობა სხულუხია
მადლობა გამოხმაურებისთვის მაგრამ ვერ ვიპოვნე თქო გითზე responsive.css, იქ მხოლოდ ამათ ვხედავ:
blog-detail.css
card.css
colors.css
contact.css
fonts.css
help.css
style.css
tables.css
ვალერი ხარიტონაშვილი
გითზე არის კოდი და შეგიძლია ჩახედო
კობა სხულუხია
ყველაფერს ზუსტად მივყევი მაგრამ ჩემთან card ცოტათი ვერტიკალურ მენიუს ეფარება, კონკრეტულად მის ბოლო პუნქტს "შესვლა"-ს(როცა რესპონსივისთვის ვაპატარავებ), გიტჰაბზე ვერ ვიპოვე responsive.css რომ მეპოვა სად მაქვს შეცდომა, მერე header nav.active-ს მოვუხსენი padding-block: 15px; და აღარ ეფარება, მაგრამ თქვენთან რანაირად არ ეფარება მაგ პარამეტრით ვერ ვხვდები