Responsive Web Designs with CSS

#html #css #webdev #beginners

Hello everyone, today I'll talk about some often asked questions about responsive web design. Although I won't teach you the complete concept of responsive web design, I will go over some related topics, such as navbars, fonts, pictures, flex and grids, media queries, etc. You will get some insight into how to make responsive design for mobile and tablet devices from it.

Let's get started...

Font Size -

When changing the font size to fit the viewport, especially for large headings that display well in desktop mode but poorly in mobile view.

<p class="responsive-text">Hello</p>

p{
  font-size:calc(20px + 0.335vw);
}

/* OR */


/* Mobile Screens */
@media screen and (min-width:481px) and (max-width:767px){
  p{
  font-size:15px;
  }
}

/* Tablet screens */
@media screen and (min-width:768px) and (max-width:1024px){
  p{
  font-size:18px;
  }
}

/* Small desktops and above screens */
@media screen and (min-width:1025px){
  p{
    font-size:22px;
  }
}

With the first way, you may use the calc method with vw to adjust the font size in accordance with the viewport, however sometimes it might get very big or very small.
The alternative approach is used when you wish to set the font size for a specific breakpoint range.
Here I have used media query which i will discuss later in this blog

Images -

When you want your image scale up or down based on viewport

<img src="https://wallpaperaccess.com/full/47128.jpg" alt="">

img {
  max-width:100%;
  min-width:200px;
}

I set the image's maximum width to 100% so it won't go beyond that limit. By choosing the minimum width, you can decide how much the image should be shrunk; in this case, 200px implies the image will only be shrunk up to 200px before stopping. The image's height will adjust appropriately.
Additionally, you can reduce the maximum width to, say, 60% so that it won't get excessively wide for desktop viewing.
Example -

Flex box -

When you want complete control of child elements use flexbox.
I generally use flexbox for creating horizontal lists, navbars, centering elements, etc.

<div class="container">
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
</div>

.container{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}
.child{
  padding:1rem 1.5rem;
  background-color:slateblue;
  color:white
}

This is a flexbox container, it will put the items in a horizontal line, in 1 row
Gap is used to provide an equal gap between the child elements, which is 1rem(16px).
Flex-wrap is crucial in this case because it creates a new row if the container size is insufficient to fit all the items in one row.s the container size shrinks, more rows will be created.
This is just a demo for showing how flexbox can help in Responsive web designs. You can learn flexbox from here - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Grid -

Grid is something in CSS that is very useful and powerful at the same time
We can create an 2d grids with responsiveness
The majority of the time, it is used to display lists in n x n grid elements like product pages, image galleries, cards, etc.

<div class="container">
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
</div>

.container{
  display: grid;
  grid-template-columns:repeat(5,1fr);
  gap:1rem;
}
.child{
  padding:1rem 1.5rem;
  background-color:slateblue;
  color: white
}

It will generate a 2x5 grid with 2 rows and 5 columns; it is not responsive, but we can make it responsive using media queries.
Another value called auto-fit or auto-fill can be used to create a responsive grid without using media queries..

grid-template-columns:repeat(auto-fill,minmax(100px,1fr));

When the container size is insufficient to hold all of the elements in one row, auto-fill will create a new row and continue creating new rows for smaller viewports until it reaches a 1 column layout with a single element in each row. Each grid cell will be 100px or 1fr, whichever is greater as specified in the minmax function.
You can learn CSS grid https://css-tricks.com/snippets/css/complete-guide-grid/

Media queries -

It is the heart of responsive web design; it is used to define viewport breakpoints where we can apply different styling to elements, as shown in the Font section example above.
You can specify a minimum range within which the element's styling will change when it reaches a minimum breakpoint specified with min-width.
Similarly You can specify a maximum range within which the element's styling will change when it reaches the maximum breakpoint specified by max-width. *There are two ways to use media queries - One is the mobile first approach, in which you design for mobile first and then, using min-width, set a minimum breakpoint above which the styling for tablet and desktop views is applied. Second, with the desktop first approach, which most developers use, you will style the webpage normally first, then style the mobile design with max-width, so the mobile design will be applied up to a certain breakpoint, and above that breakpoint, the tablet or desktop style will be applied.

<header class="primary-navigation">
  <h1 class="logo">Logo</h1>
  <ul class="nav-list">
    <li class="nav-items">Home</li>
    <li class="nav-items">Pricing</li>
    <li class="nav-items">About</li>
    <li class="nav-items">Contact</li>
  </ul>
</header>

*{
  margin:0;
  padding:0;
  list-style:none;
}
.primary-navigation{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 1.5rem;
}
.logo{
  font-size:calc(20px + 0.335vw)
}
.nav-list{
  display:flex;
  gap:1rem;
}

@media screen and (max-width:500px){
  .primary-navigation{
    flex-direction:column;
    align-items:center;
  }
  .nav-list{
    margin-top:1rem;
    flex-direction:column;
  }
}

So i created a simple navbar which is responsive with media queries and flexbox.
You can add a toggle effect with hamburger icon using javascript
Proper Navbar Example -

THANK YOU FOR CHECKING THIS POST
You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/css-iswherehas-and-not-2afd

https://dev.to/shubhamtiwari909/theme-changer-with-html-and-css-only-4144

https://dev.to/shubhamtiwari909/swiperjs-3802

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90