Social-Links-Profile

To set a maximum width for both mobile and desktop views on a webpage, you can use CSS media queries to define different styles based on the screen size. Here's how you can do it:

CSS Example

/* Default Styles (Mobile First) */
body {
    margin: 0 auto;
    max-width: 100%; /* Ensures content fits within the viewport */
    padding: 0 16px; /* Adds some padding for smaller screens */
}

/* Desktop Styles */
@media (min-width: 768px) {
    body {
        max-width: 1200px; /* Sets the max-width for larger screens */
        padding: 0 32px; /* Adds padding on larger screens */
    }
}

Explanation:

• Mobile First: The default max-width: 100% ensures that the content takes up the full width of smaller screens, with some padding for spacing.

• Desktop: The @media (min-width: 768px) query applies styles when the screen width is 768px or larger, typically targeting tablets and desktops. Here, max-width: 1200px ensures that the content doesn’t exceed this width on larger screens, and additional padding is added.

This approach creates a responsive design that adjusts well to both mobile and desktop environments.