I am coding an HTML drumpad program like this, I'm styling it with CSS:
#drumpad-container {
display: grid;
}
<!DOCTYPE html>
<html>
<head>
<title>Drumpad</title>
<link rel='stylesheet' type='text/css' href='..\CSS\drumpad.css'/>
<script src='..\JS\drumpad.js'></script>
</head>
<body>
<div id='drumpad-container'>
<div id='drumpadQ'>'Q'</div>
<div id='drumpadW'>'W'</div>
<div id='drumpadE'>'E'</div>
<div id='drumpadA'>'A'</div>
<div id='drumpadS'>'S'</div>
<div id='drumpadD'>'D'</div>
<div id='drumpadZ'>'Z'</div>
<div id='drumpadX'>'X'</div>
<div id='drumpadC'>'C'</div>
</div>
</body>
</html>
My goal is to have the <div> tags in a grid, 3 x 3.
The HTML works, but the CSS doesn't!
Someone please help?!
You need to specify the grid template. In this case, you only need grid-template-columns.
#drumpad-container {
display: grid;
grid-template-columns: repeat(3, auto);
}
<!DOCTYPE html>
<html>
<head>
<title>Drumpad</title>
<link rel='stylesheet' type='text/css' href='..\CSS\drumpad.css'/>
<script src='..\JS\drumpad.js'></script>
</head>
<body>
<div id='drumpad-container'>
<div id='drumpadQ'>'Q'</div>
<div id='drumpadW'>'W'</div>
<div id='drumpadE'>'E'</div>
<div id='drumpadA'>'A'</div>
<div id='drumpadS'>'S'</div>
<div id='drumpadD'>'D'</div>
<div id='drumpadZ'>'Z'</div>
<div id='drumpadX'>'X'</div>
<div id='drumpadC'>'C'</div>
</div>
</body>
</html>
See A Complete Guide to Grid for more information.
You need to define the columns and rows of #drumpad-container.
See this page for more help with CSS Grid. https://css-tricks.com/snippets/css/complete-guide-grid/
#drumpad-container {
display: grid;
grid-template-columns: auto auto auto; /* or 33% 33% auto; or 25% 50% 25%; etc. */
grid-template-rows: auto auto auto;
}
You can achieve this by set #drumpad-container{display:grid;grid-template-columns: auto auto auto}
For more information visit this link enter link description here
#drumpad-container {
display: grid;
grid-template-columns: auto auto auto;
}
<!DOCTYPE html>
<html>
<head>
<title>Drumpad</title>
<link rel='stylesheet' type='text/css' href='..\CSS\drumpad.css'/>
<script src='..\JS\drumpad.js'></script>
</head>
<body>
<div id='drumpad-container'>
<div id='drumpadQ'>'Q'</div>
<div id='drumpadW'>'W'</div>
<div id='drumpadE'>'E'</div>
<div id='drumpadA'>'A'</div>
<div id='drumpadS'>'S'</div>
<div id='drumpadD'>'D'</div>
<div id='drumpadZ'>'Z'</div>
<div id='drumpadX'>'X'</div>
<div id='drumpadC'>'C'</div>
</div>
</body>
</html>
Related
I have almost the same question as this guy How to split Bootstrap column in mobile mode but I'm using Bootstrap 5 and the solution there with float: right is no longer working due to flexbox.
I have two columns on desktop and I want the first column insert in the middle of the second one on mobile. See my Excel artwork, I can't find any solution. Can any one help me please.
I've tried something like this, but I can't figure out how to put the "controls" under the "txt" content
<div class="container">
<div class="row">
<div class="col-md-6 order-md-1">text</div>
<div class="col-md-6 order-md-0">img</div>
<div class="col-md-6">controls</div>
</div>
</div>
Note:
The image you provided can never be resulted from the code you added for
desktop, but as far as I understand your question. This might be helpful. (without using order)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<title>Bootstrap demo</title>
</head>
<body>
<div class="container">
<div class="row g-0">
<div class="col-md-6 bg-light">Image</div>
<div class="col-md-6">
<div class="bg-warning">text</div>
<div class="bg-success">controls</div>
</div>
</div>
</div>
</body>
</html>
I added colors for simplicity.
Finally, friend of my helped me and coded it. For anyone having the same question, here's solution using CSS3 grid.
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"txt"
"img"
"controls"
}
.container__img {
grid-area: img;
}
.container__txt {
grid-area: txt;
}
.container__controls {
grid-area: controls;
}
#media only screen and (min-width: 768px) {
.container {
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"img txt"
"img controls";
}
}
https://codepen.io/stepanhalir/pen/rNrJrvg
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 2 years ago.
Improve this question
Im making a website here and im using css for the card containers, but when it is viewed on a smaller screen or when the cards do not fit inside of one page I cant scroll up or down. I've looked at the scroll-behavior and tried but it won't let me change it even with that on "auto". I'm using chrome for testing.
heres the example:
.grid-container {
display: grid;
grid-gap: 1px;
padding: 1px;
align-content: space-evenly;
grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}
<!DOCTYPE html>
<head>
<link href="https://fonts.googleapis.com/css?family=Muli:400,600,700" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#nimiq/style#v0.8.2/nimiq-style.min.css" rel="stylesheet">
</head>
<div class="grid-container">
<div class="nq-card">
<div class="nq-card-header">
<button class="nq-button light-blue">Test</button>
</div>
</div>
<div class="nq-card">
<div class="nq-card-header">
<button class="nq-button light-blue">Test</button>
</div>
</div>
<div class="nq-card">
<div class="nq-card-header">
<button class="nq-button light-blue">Test</button>
</div>
</div>
<div class="nq-card">
<div class="nq-card-header">
<button class="nq-button light-blue">Test</button>
</div>
</div>
</div>
This snippet with corrected structure runs fine on SO and 'live' in the browser...
In your (full) running code both <html> and <body> have CSS set overflow: hidden. Remove/disable that CSS (class .stuck used on body) and you should be able to scroll.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1">
<title>SO62866913</title>
<link href="https://fonts.googleapis.com/css?family=Muli:400,600,700" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#nimiq/style#v0.8.2/nimiq-style.min.css" rel="stylesheet">
<style>
.grid-container {
display: grid;
grid-gap: 1px;
padding: 1px;
align-content: space-evenly;
grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}
</style>
</head>
<body>
<div class="grid-container">
<div class="nq-card">
<div class="nq-card-header">
<button class="nq-button light-blue">Test</button>
</div>
</div>
<div class="nq-card">
<div class="nq-card-header">
<button class="nq-button light-blue">Test</button>
</div>
</div>
<div class="nq-card">
<div class="nq-card-header">
<button class="nq-button light-blue">Test</button>
</div>
</div>
<div class="nq-card">
<div class="nq-card-header">
<button class="nq-button light-blue">Test</button>
</div>
</div>
</div>
</body>
</html>
i want to style div elements in code below differently without changing class names , in fact every element with class named "right" represent one side of a hollow rectangle , so i want every elemnt have the same width and height but different position(vertical horizental ...) .
i know that i can give different id or class name to each div element but i want to know if there is anyway to style elements with same class names differently??
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id='container'>
<div class='right'></div>
<div class='right'></div>
<div class='right'></div>
<div class='right'></div>
</div>
</body>
</html>
.right:nth-child(1) {
background: red;
}
.right:nth-child(2) {
background: yellow;
}
...
https://www.w3schools.com/CSSref/sel_nth-child.asp
Inside each div tag You can add a new div tag with different class name or id. It won't make any difference in your output.
#container{
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr 2fr;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id='container'>
<div class='right'>one</div>
<div class='right'>two</div>
<div class='right'>three</div>
<div class='right'>four</div>
</div>
</body>
</html>
I created a sample page with a header containing an image. But the page is not responsive. I added the class img-responsive to the img tag but yet it is not responsive. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>A Sample Bootstrap Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header" id="header">
<img id="logo" src="img/logo.png" height="100" alt="Image" class="img-responsive">
<p>Some text here</p>
</div>
</div>
</body>
</html>
The style.css includes the following:
#header #logo
{
display: block;
margin-left: auto;
margin-right: auto;
}
Remove the img tag height="100" as suggested above and add this to your style.css
#header #logo {
display: block;
margin-left: auto;
margin-right: auto;
height: 100px;
}
As for the image not being responsive make sure the bootstrap style for .img-responsive is being used
In firebug/developer tools you should see a class of
.img responsive {
max-width: 100%;
height: auto;
display: block;
}
As for resolving your issue I'll be glad to solve it if you can make a codepen/snippet example for me to see/look at
You should do like this,even needn't use custom class to style, bootstrap provided enough.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="http://lorempixel.com/1900/100/" alt="" class="img-responsive">
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="http://lorempixel.com/1900/100/" alt="" class="img-responsive">
</div>
</div>
</div>
</body>
</html>
I'm trying to decide no the best way to make a side-by-side column-like layout using CSS and divs.
For some reason when I use display: inline-block;, if the aggregate width of the column-divs is equal to 100%, the last div wraps onto the next line. However, if I use floating divs, this doesn't happen, even with identical width.
For example, the two divs in this example appear on different lines:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://rleahy.ca/reset.css" />
<style type="text/css">
.column { width: 50%;
display: inline-block;
}
</style>
</head>
<body>
<div class="column">
Column 1
</div>
<!-- This div is on the second line -->
<div class="column">
Column 2
</div>
</body>
</html>
But in this example they don't:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://rleahy.ca/reset.css" />
<style type="text/css">
.column { width: 50%;
float: left;
}
</style>
</head>
<body>
<div class="column">
Column 1
</div>
<div class="column">
Column 2
</div>
</body>
</html>
Using both Chrome and IE8.
Why does this happen?
inline-block respects white-space in your markup. try:
<div class="column">Column 1</div><div class="column">Column 2</div>
see what happens