responsive Archives - scmGalaxy https://www.scmgalaxy.com/tutorials/tag/responsive/ A Platform for Software Engineers Wed, 13 Apr 2022 16:34:46 +0000 en-US hourly 1 https://wordpress.org/?v=7.1 How to create a Responsive Glowing Card in a row using HTML & CSS? https://www.scmgalaxy.com/tutorials/how-to-create-a-responsive-glowing-card-in-a-row-using-html-css/ https://www.scmgalaxy.com/tutorials/how-to-create-a-responsive-glowing-card-in-a-row-using-html-css/#respond Sat, 28 Aug 2021 12:41:29 +0000 https://www.scmgalaxy.com/tutorials/?p=8473 In this blog, I am creating a responsive Glowing Card in a row using HTML & CSS. So, Let’s create […]

The post How to create a Responsive Glowing Card in a row using HTML & CSS? appeared first on scmGalaxy.

]]> In this blog, I am creating a responsive Glowing Card in a row using HTML & CSS. So, Let’s create an “index.html” & “style.css” below index.html code-

In this index.html box class with span & multiple class which is define style.css page-

When you using this index.html & style.css then showing below Responsive glowing Card in row-

The post How to create a Responsive Glowing Card in a row using HTML & CSS? appeared first on scmGalaxy.

]]> https://www.scmgalaxy.com/tutorials/how-to-create-a-responsive-glowing-card-in-a-row-using-html-css/feed/ 0 How to create a Responsive Navigation Bar with HTML CSS and Javascript? https://www.scmgalaxy.com/tutorials/how-to-create-a-responsive-navigation-bar-with-html-css-and-javascript/ https://www.scmgalaxy.com/tutorials/how-to-create-a-responsive-navigation-bar-with-html-css-and-javascript/#respond Tue, 17 Aug 2021 13:04:26 +0000 https://www.scmgalaxy.com/tutorials/?p=8041 In this tutorial, I am using HTMO, CSS, and Javascript and create a Responsive Navigation Bar. So, first create page […]

The post How to create a Responsive Navigation Bar with HTML CSS and Javascript? appeared first on scmGalaxy.

]]> In this tutorial, I am using HTMO, CSS, and Javascript and create a Responsive Navigation Bar. So, first create page with “.html” extension and write code as below-

And Below CSS code which is using in this navigation bar-

After that complete a Responsive Navigation bar as below –

When using a cursor on navbar link then uses “:hover” css function
In this Mobile showing as view responsive with “toggle” fa fa icon
When Click “toggle” fa fa-icon then show this type of navigation bar.

The post How to create a Responsive Navigation Bar with HTML CSS and Javascript? appeared first on scmGalaxy.

]]> https://www.scmgalaxy.com/tutorials/how-to-create-a-responsive-navigation-bar-with-html-css-and-javascript/feed/ 0 Some important CSS property for uses in your responsive bootstrap 4 pages https://www.scmgalaxy.com/tutorials/some-important-css-property-for-uses-in-your-responsive-bootstrap-4-pages/ Mon, 17 May 2021 07:12:43 +0000 https://www.scmgalaxy.com/tutorials/?p=6295 How do you change the direction of flex in CSS? The flex-direction property accepts 4 different values: Property Description row […]

The post Some important CSS property for uses in your responsive bootstrap 4 pages appeared first on scmGalaxy.

]]> How do you change the direction of flex in CSS?

The flex-direction property accepts 4 different values:

PropertyDescription
row (default)same as text direction.
row-reverseopposite to text direction.
columnsame as row but top to bottom.
column-reversesame as row-reverse top to bottom.

What are the background properties?

All CSS Background Properties
Property Description

PropertyDescription
background-imageSets the background image for an element
background-originSpecifies where the background image(s) is/are positioned
background-positionSets the starting position of a background image
background-repeatSets how a background image will be repeated

How do you change position in CSS?

You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document.

PropertyDescription
Move LeftUse a negative value for left.
Move RightUse a positive value for left.
Move UpUse a negative value for top
Move DownUse a positive value for top.

What is Z-index in CSS?

The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
If you want to create a custom stacking order, you can use the z-index property on a positioned element. The z-index property can be specified with an integer value (positive, zero, or negative), which represents the position of the element along the z-axis.

How do I fix Z-index in CSS?

To sum up, most issues with z-index can be solved by following these two guidelines:
Check that the elements have their position set and z-index numbers in the correct order.
Make sure that you don’t have parent elements limiting the z-index level of their children.

How do you use sticky position in CSS?

CSS Demo: position

To see the effect of sticky positioning, select the position: sticky option and scroll this container. The element will scroll along with its container, until it is at the top of the container (or reaches the offset specified in top ), and will then stop scrolling, so it stays visible.

How do you flex vertically?

Vertical alignment using align-self

PropertyDescription
flex-startalign to the top of the container.
flex-endalign to the bottom of the container.
centeralign at the vertical center of the container.
baselinedisplay at the baseline of the container.
stretchitems are stretched to fit the container.

The post Some important CSS property for uses in your responsive bootstrap 4 pages appeared first on scmGalaxy.

]]>