Using Container Queries of CSS

hey everyone and welcome back to daily tuition in this video we are going to talk about container queries of CSS when working with component we tend to add different variations and change them either based on the CSS class or the viewport size for that we can use media query of CSS but media query Works only with Device viewport let me show you a very simple example here in this example on the left side we have the sidebar and the article component and I'm going to have the same article component in the main area of this website we have the same styling and the UI to both this component but now if I increase the viewport you can notice the main area component behave differently notice that the main area component version is too larger for me this doesn't look good for the UI perspective with container queries we can simply write a CSS that responds to the parent or you can say a container web instead of the viewport let me show you can solve this problem with media query first and then we can work with the container query so I'm going to open the vs core and here is the application here we have the simple index.html file layout.css and style.css file inside the layout.css we have all the default styling of this page and inside this index.html here I'm going to put the header the main section of this website and the footer inside the main section we are going to have the sidebar and the main content area inside the sidebar we have the article component and I'm going to have the same component inside the main area as well now let me open the style.css file and here I'm just going to select this main element and then I'm going to specify display gate and divide this component into two columns using this grid template column now what I'm going to do is I'm going to use the media query to solve this problem we call add media and then you specify the minimum width the minimum width is going to be 1300 pixel and inside this I'm going to select the card and to this car I'm going to specify all the CSS properties which I want to apply to this component when the minimum viewport is 1300 pixel and I'm going to do the same for the image as well so I'm going to copy and paste the CSS styling of the image now let me save the changes and show you the result now when I say purchase and reload the browser I'm going to have the result something like this now if I increase the viewport this is going to change the UI of this component and I'm going to have my finished component as a response this card component is going to apply all this styling when the viewport is greater than 1300 pixel if the viewport is greater than 1300 pixel we're going to have this styling but you will notice we have the same component in the sidebar as well what I want I want to use vertical car in the sidebar and horizontal car in the main area so let me show you how you can solve this problem with container queries so let me comment this media query and at the top we're going to add a container with container queries we can simply write a CSS that responds to the pattern or you can say a parent container with I'm going to first select the container class this one so inside style.css here I'm going to say container and to this container I'm going to specify a CSS property call antenna type and we're going to have three values to this container type property first is size now when you specify size to this container type the query will be based on the inline and block dimensions of the container if you specify inline size then the query will be based on the inline dimension of the container and you also can specify normal value is it normal you can specify this is not a query container right now we are using value here size just for that write down here when the viewport is greater than 1300 pixel you apply all this styling right we can do the same thing with container as well so we call here at container and then specify a parenthesis and inside this I'm going to say minimum width colon and then specify the minimum width of the container keep in mind we are not here specifying the width of the viewport we are going to specify the width of the container the size of this container this division that so now if this division tag is more than 600 pixel then I'm going to execute this block and inside this block I'm going to call this styling this one so now this styling is going to apply to this division tag only when the width of this division tag is greater than 600 pixel now you might have multiple containers inside your CSS file so you can also specify name to your container to specify name to your container you specify here container iPhone name and here you specify the name to this container I'm going to choose name card and you have to just specify this car name to this container so just out of this container you specify cart so using this name you can Define your container now let me save the changes and show you the result back to the project and you can see we're going to have the result what we want we're going to have the sidebar component and the main component when I decrease the viewport nope this is what we want we have the component what we want so this will solve the problem container queries allows us to look at the container size and apply style to the content based on the size of their container rather than the viewport so instead of so instead of the viewport when the size of the container is more than 600 pixel you can see when the size of this container is more than 600 pixel we are going to apply all these classes to this container class I hope you understand how to work with container in CSS if you want to learn more about containers then let me know in the comment section I will make a complete website with 29 queries if you find anything useful make sure to press the like button share this video with your friends subscribe for more latest videos that is all for now I will see you in the next one

Channel: Daily Tuition

Views: 6,792

Keywords: Using Container Queries of CSS, how to use container queries, solve ui problems with container queries, @containers, css container queries, working with container queries, css queries, working with css queries, css, queries, make

Id: E1V8OUv-lS4

Length: 6min 21sec (381 seconds)

Published: Wed Jan 18 2023