Making Website Responsive

Development
1

We all know that first Impression is the last impression ,this greatly applies to website we build .
Therefore we should always try to build a responsive website, a responsive design helps the website look polished and professional on whether it’s a phone, tablet, or desktop.
So we can

1.Using Flexbox and Gridlayout
Example of using flexbox in navbar

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.nav-links {
    display: flex;
    gap: 1rem;
}

Example of using grid layout , grid system aligns content consistently across devices

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 1rem;
}
  1. Using Responsive Units
  • rem for typography (relative to root font size)
  • em for component-based sizing
  • % for widths and containers
  • vw/vh for viewport-based dimensions
    Example
:root {
    font-size: 16px; /* Base font size */
}

.container {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
}

h1 {
    font-size: 2.5rem;
}

.hero {
    height: 80vh;
}

3.Using Media Queries
Media queries are the backbone of responsive design this allow you to define specific CSS rules based on screen dimensions, adjusting layouts and components based on the user’s device whether its a phone,tablet or a desktop.
First step is to find out the breaking points of our website when we resize the window size or change the viewport(from deskotop view to mobile view or tablet view).
Example

/* For tablets */
@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

/* For mobile */
@media (max-width: 480px) {
  .main-content {
    width: 100%;
  }
}```
By incorporating these practices, you can create a responsive website that leaves a great first impression, no matter the device.
2

Hi @abhay.prajapati.ug21,

Thankyou for your response, this will help other students is resolving their issues.