A developer uses CSS to change how a website looks on different screen sizes. This makes the website work well on both small mobile screens and large desktop screens. Specific CSS rules hide or show elements and change their layout.
By Pawan Nayar · from the LLOS AI Learning record
A developer uses CSS to change how a website looks on different screen sizes.
This makes the website work well on both small mobile screens and large desktop screens. Specific CSS rules hide or show elements and change their layout.
A developer can hide the hamburger menu icon on large screens. The developer can hide the regular navigation menu on small screens. A special class, like `.open`, can show the hidden menu when a user clicks the hamburger icon. For mobile dropdown menus, the developer sets the position to `absolute`. This makes the menu appear over other content. The menu fills the width of the screen and stacks items vertically. The background color should match the website's design. On mobile, small 'pill' elements can become full-width. The developer removes rounded corners and sets the width to 100%. On desktop, these pills can wrap to new lines if the screen is narrow. The developer uses `flex-wrap:wrap` and `justify-content:center`. When choosing colors, a developer should use design tokens. For example, `var(--secondary)` might be a dark background. A developer can change this to `var(--primary)` or another dark token to match specific page designs.
A developer designs a website. On a desktop computer, the user sees a full navigation bar. On a mobile phone, the user sees a small hamburger icon. When the user taps the icon, a menu drops down. This menu takes up the full width of the phone screen.
Resolved from this lesson's own record — real definitions, not invented for this page.
More from the same record, pulled by shared topic — not written new for this page.
An overlay pane needs to be positioned correctly. Use `position: fixed` in the CSS code.
An AI model should never show a blank screen during loading. A blank screen makes the product seem broken.
A developer must add extra space to the bottom of the main content area. This space is called padding.
A new design must use the exact layout proportions of a proven design. The proven design has been refined over many hours.
A developer uses CSS to change how a website looks on different screen sizes. This makes the website work well on both small mobile screens and large desktop screens. Specific CSS rules hide or show elements and change their layout.