To change the layouts based on screen size in CSS, we will create a parent div and set divs in it. Using Media Queries, the layout of the screen size will be changed. Media Queries is used when you need to set a style to different devices such as tablet, mobile, desktop, etc. Create a Parent div The divs on the web page is set inside a parent div − The following is set to make the container i.e. the parent div behave like a table − .colContainer:after { ... Read More

Media Queries is a CSS technique for different style rules for different size devices such as mobiles, desktops, etc. To set the responsiveness, use the Media Queries concept. Let us see how to create responsive column cards on a web page. We will see various examples for responsive web design The screen sizes are mainly desktop, tablet, and mobile devices. Let us first set the different screen sizes i.e., where we will set the common device breakpoints. Different screen sizes responsiveness Let us see an example where we will set different styles for different devices and display responsiveness The common ... Read More

To enable wrapping of Flex Items using CSS3, the flex-wrap property is used. Set the value wrap to enable wrapping. Enable Wrapping of Flex Items In this example, we enable wrapping of flex items using the flex-wrap: wrap. The following is our flex container − First Div Second Div Third Div We have styled the flex container like the following. The flex-wrap is set to wrap the flex items − .container { height: 300px; display: flex; width: ... Read More

To reorder the individual Flex Items using CSS3, use the order property. Remember, this works only in case of flex items. Let’s say you want to set the 1st flex item as the last, then achieve this using the CSS order property. Set the parent container Set a div container with child divs − First Div Second Div Third Div The flex container Set the above container as a flex using the display property with the value flex − .container { height: 150px; ... Read More

We can easily align the flex items along cross axis, but first let us understand what cross axis is. The cross axis is perpendicular to the main axis. The main axis is like the flex direction − Create a Container div First, set the divs inside a container(flex container) − First Div Second Div Third Div Style the Container and Make it Flexible The flex container becomes flexible by setting the display property to flex. The flex items are aligned using the align-items property − ... Read More

To control the dimensions of Flex Items in CSS, use the flex property. Consider flex as the length on flexible items. The flex includes the following properties − flex-grow − A number is set for the flex grow factor i.e., how much the item will grow relative to the other flexible items. flex-shrink − A number is set for the flex skrink factor i.e., how much the item will shrink relative to the other flexible items. flex-basis − The initial size of a flex item. Control the Dimensions of Flex Items With the Shorthand Property We have set ... Read More

CSS3 provides a layout mode Flexible Box, commonly called as Flexbox. Flexbox (flexible box) is a layout mode of CSS3. Using this mode, you can easily create layouts for complex applications and web pages. It includes the container, flex items, etc. The container has the following properties − flex-direction − Set the direction of the flex items flex-wrap − Set whether the flex items should wrap or not flex-flow − It is a shorthand property for flex-wrap and flex-direction justify-content − Align the flex items align-items − Vertically align the flex items align-content − Align flex lines Set ... Read More

To change the color of the placeholder attribute with CSS, use the ::placeholder. This will update the default color of a placeholder on a web page. Create a Form and set the Input Fields First, create a form using the and set the input typeswith the placeholder attribute − Above, we have also set the placeholder − placeholder="Some placeholder text" Set the Placeholder Color To set the color of the placeholder, use the color property, but set it using the ::placeholder pseudo element − ::placeholder { color: rgb(70, 53, 167); } Change the Placeholder Color In this example, we will change the default placeholder color − Example ... Read More

A look for a smartphone, mobile, or desktop view can be easily created with CSS. For our example, we are creating a mobile i.e., a smartphone looks and will also open a random website in it. We will create a mobile device like structure and use iframe to add the website link. Let us see how to create a smartphone like device look on a web page. Create a container for the mobile device Create a parent div container − Set ... Read More

To create a custom scrollbar with CSS, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;       height: 200vh; /*to create a scrollbar*/    }    ::-webkit-scrollbar {       width: 20px;    }    p {       font-size: 40px;    }    ::-webkit-scrollbar-track {       box-shadow: inset 0 0 5px grey;       border-radius: 10px;    }    ::-webkit-scrollbar-thumb {       background: rgb(75, 22, 161);       border-radius: 2px;    }    ::-webkit-scrollbar-thumb:hover ... Read More