CSS tips for Responsive Web design

Crafting a responsive website can be daunting, demanding a deliberate approach to guarantee a visually appealing layout on all devices.

The growing array of devices and screen sizes presents challenges in creating a straightforward and efficient design.

Here are some CSS tricks and properties for creating more responsive designs

1. aspect ratio

this CSS property lets you have consistent proportions of width and height for an html element about its parent element or its-self

.container{
   aspect-ratio: 16/9;
}

The relationship for the element having the CSS class container will be the width of 16 by the size of 9

you can also set the width or height from which the aspect ratio will get its measurement instead of getting from the parent element

.container{
   aspect-ratio: 16/9;
   width: 100px;
}

2. Use rem or em instead of px

Rem and em are relative units that adjust their size based on the font size of their parent element. This means that if the font size of the parent element changes, all child elements that use rem or em will adjust their size accordingly.

This makes it easier to create responsive designs that can adapt to different screen sizes and devices.

On the other hand, px is an absolute unit that sets the font size to a fixed pixel size. This can create issues with scalability, especially when designing for different devices and screen sizes.

Additionally, using px can make it difficult to implement accessibility features like zooming, as the font size will not adjust when the user zooms in or out.

3. min() , max() and clamp()

min()

starting with min, it takes at least two arguments which are the desired width and the maximum width

.container{
   width: min(100px,70%);
}

the function only picks the smallest value so it doesn’t care much about the placement of the arguments

the 70% is the desired width and the element won't have a width greater than 100px

# same as using min()
.container{
   width: 70%;
   max-width: 100px;
}

max()

max() works opposite to how min() works

.container{
   width: max(100px,70%);
}

# same as using max()
.container{
   width: 70%;
   min-width: 100px;
}

clamp()

clamp() takes three arguments: a minimum value, a preferred value, and a maximum value. The preferred value is the size you want to use, and the other two values set the range in which the preferred value can adjust

.container{
  font-size: clamp(16px, 3vw, 24px);
}

4. Text-overflow

You know those moments when you are trying to fit content in a div but make one div bigger than the other divs in maybe your flex row, well this solves that. It adds three dots to content that is longer than the space in the parent div has

.container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

5. Media-query

without forgetting the big boy in responsive design, Media-query allows you to adjust to different device properties, such as screen size or orientation.

here is a basic view of how they work

@media only screen and (max-width: 768px) {
  .menu {
    display: none;
  }
}

for the above example, the .menu element will be hidden on screens with a width of 768 pixels or less, allowing for a better user experience on smaller screens.

for a deeper understanding of Media-query here's the link to the documentation

And those are some of the many CSS properties that you can use for a more responsive web design