@rafbar2000rr
Posted
Instead of hardcoding pixel/rem widths for each media query, use percentages or relative units like vw to provide more fluid scaling across different devices. For the width, vw (viewport width) is used for the main container, image, and text sizes, making the layout adjust dynamically as the viewport changes. This prevents having to switch between fixed widths.Use media queries only for 375px and 1440 px as written in the design. These are the changes you can do: .container { width: 80vw; /* Uses 80% of the viewport width / max-width: 90rem; / Restricts max width for large screens */ display: flex; font-family: 'Outfit', sans-serif; background-color: hsl(212, 45%, 89%); justify-content: center; align-items: center; text-align: center; margin: 6.25rem auto; padding: 6.25rem; }
.base { width: 60vw; /* Responsive width / max-width: 25rem; / Limit the maximum size / background: hsl(0, 0%, 100%); border-radius: 20px; text-align: center; padding: 15px 5px 25px 5px; box-shadow: 1px 2px 10px hsl(220, 15%, 55%); } / Media Query for Mobile Devices (375px) / @media (max-width: 375px) { .container { width: 90vw; / Slightly wider on small screens */
}
.base {
width: 80vw; /* Adjust the container width */
}
}
/* Media Query for Desktop Devices (1440px and larger) / @media (min-width: 1440px) { .container { width: 60vw; / Restrict width on larger screens */
}
.base {
width: 40vw;
}
}
