CSS positions & media queries

Welcome back😊

Note: This blog is a mix of two short blogs. Today I am going to discuss CSS positions and media queries. My blogs are generally longer, so this will be a brief discussion about the mentioned topics. This blog will mostly contain information that is not usually talked about.

CSS positions:

Before the theory, I want to ask you why we would want to know or use positions. Because it can give us the liberty to place any items anywhere we want. We can place it with respect to its original position or its parent. We can keep it fixed. (Oops...Why have I given spoilers?)

As you already guessed, there are 6 types of positions in CSS.

• Static: It is the default position of the element.

  .element
  {
  position: static;
  }
  

• Relative: It is used to place an item with respect to its original position.

  .element
  {
  position: relative;
  top: 20px;
  }
  

• Absolute: It is used to place an item with respect to its parent's position.

  .element
  {
  position: absolute;
  top: 20px
  }
  

• Fixed: It is used to fixate the position of an item. E.g. chatbox of a website.

  .element
  {
  position: fixed;
  bottom: 20px;
  right: 20px;
  }
  

• Sticky: This is a tricky one. Have you seen the navbar of any website? Until it is scrolled it stayed in its static position but when we scroll down it stays at the same spot.

  .element{
  position: sticky;
  top: 50px;
  }
  

• Inherit: They inherit properties from their parents.

Note:

On a serious note, we may have to use position property many times on a single webpage. Try to make your stylesheet as simple and short as possible. Do not try to use this property as much as you wish because your code can be more tedious and prone to error.

CSS Media query:

At the pinnacle of web development, we used to have only desktops for viewing and using the web. Good old days with Nokia 3310😇. Then the tablets came. It was not too much of a problem because tablets were 10 or 11 inches. Just a shrunk view of the webpage that of a desktop was enough. But then the smartphones came and they were 4 inches. So, the letters you could read easily on a website, you cannot read on a mobile. Arguably, lots of mobile apps were introduced at that time but they kind of occupied the memory. So, there had to be a way to make websites mobile friendly. Hence, the media queries.

In simple words, there are different types of resolution in any device. So, we can note the maximum width and minimum width of a particular device type. Then we can apply media queries to different width ranges to see the changes we can make to our content on different devices. It is used to make webpages responsive.

How to use media queries?

In our stylesheet, we use @media followed by the value of minimum width and maximum width. Within the media, we write our selectors within selectors.

@media (min-width: 576px) & (max-width: 768px){
    body{
    background-color: #fff;    
}
}

The upcoming topic is a short discussion about how responsiveness is achieved in tailwind CSS. Those who do not know anything about tailwind CSS can totally skip this for now. Make sure to come back later.

In tailwind CSS, there are some breakpoints(of different width values) of the webpage are defined as follows.

To apply this change to a specific breakpoint add the prefix before the style.

E.g.

<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="...">

So, that was just a brief discussion. If you wish to know more.

Follow these links:

• CSS positions

• CSS media query