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
Related
I have some divs arranged in a way so that there are two columns, and a box that overlaps between them. For reasons I can't figure out, the div extends just slightly past the page width, causing a horizontal scroll bar to appear (which is bad).
Additionally, the left most div extends below the background image of the parent div, which should not be possible.
Why are these divs not lining up neatly?
My HTML code is below. I am not using a snippet as the snippet shows the output in responsive mode which does not demonstrate the issue. I know that inline CSS is advised against, and it is only used for the purpose of this question.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Demo Page</title>
</head>
<body class="d-flex flex-column h-100">
<div style="height:500px;background-image:url(https://www.w3schools.com/howto/img_parallax.jpg);background-position:center;background-size:cover;">
<div class="row pb-3" style="height: 520px; position:relative;">
<div class="p-3" style="position:absolute; background:white; top:100px; height:220px; width:400px; z-index: 2;">
<h1>Text to overlap here</h1></div>
<div class="col-md-3" style="background:grey;"> </div>
<div class="col-md-9" > </div>
</div>
</div>
</body>
</html>
Just add to row with class pb-3
.pb-3{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
You can also add to div with class p-3
.p-3{
max-width: 100%;
}
Avoid using "height" and use min-height /max-height instead.
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 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>
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'm currently in the process of learning Bootstrap and I'm still fairly new, so please go easy on me. I'm trying to make a page where there is a main heading for the page, a heading above the grids, and 3 unequal responsive grids than span the height of the rest of the page, even when the browser is resized. I've tried setting height or row and each div to 100%, I also tried looking this up but I didn't find anything of much use, and I'm not sure how I would achieve this, Thanks for taking the time to help. Code is:
EDIT: To specify, my issue is getting the remaining area to take up 100% of space, not a div taking up 100% of the page, just the remaining part
.div1 {
background-color:red;
}
.div2 {
background-color:gray;
}
.div3 {
background-color:blue;
}
.row {
height: 100%;
}
#main {
background-color: yellow;
}
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<h1>Welcome</h1>
<div class="container-fluid" id="main">
<h1>This is a heading</h1>
<div class="row">
<div class="col-sm-3 div1">Left side</div>
<div class="col-sm-6 div2">Middle</div>
<div class="col-sm-3 div3">Right side</div>
</div>
</div>
</body>
</html>
Try this
.row {
height: 100vh;
}
More information here:
https://stackoverflow.com/a/16837667/7361767