Front End Technology Articles - Page 428 of 860

To change layouts based on screen size in CSS, we will create a parent div and wrap other children divs within 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. In this article, we are having four boxes of same width, our task is to change layouts based on screen size in CSS. Steps to Chnage Layouts Based on Screen Size We will be following below mentioned steps to change layouts based on screen size in ... 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, we will be using ::placeholder pseudo-element which will update the default color of placeholder. In this article, we are having a text type input field with default placeholder color, our task is to change the color of the placeholder attribute with CSS. Steps to Change the Placeholder Color We have used input tag to create an input field and used label tag to define the input field. Then, we have used ::placeholder psuedo pseudo-element selector to select the placeholder and change ... 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