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>
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
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 6 months ago.
my HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon"
href="//theme.zdassets.com/theme_assets/2197739/1a71d05024d0bf628f47cb2a498903409ad571f0.png" />
<title>myAbstract</title>
</head>
<header class="header">
<a href="https://www.goabstract.com/">
<img src="//theme.zdassets.com/theme_assets/2197739/df1f3a3595ad6f2e809942c0cbfa85f84156dd61.svg" alt="Logo"
class="favicon">
</a>
<span class="help-center"> | Help Center</span>
<button class="submit-btn">submit a request</button>
<button class="sign-in-btn">sign in</button>
</header>
<body>
<div class="search-body">
<h1>How can we help?</h1>
<input class="search-bar" type="search" placeholder="Search" aria-label="Search">
</div>
<div class="first">
<div>
<h3>Using Abstract</h3>
<p>Abstract lets you manage, version, and document your designs in one place.</p>
<a href="https://help.abstract.com/hc/en-us/categories/360005436612-Using-Abstract"
class="category-list-link">Learn More →</a>
</div>
<div class="img1">
<img src="1.png" alt="1st">
</div>
</div>
</body>
</html>
related part of my CSS code
.header {
background-color: black;
width: 100%;
height: 88px;
overflow-x: hidden;
overflow-y: hidden;
padding: 0;
margin: 0;
}
.search-body {
background-color: #DADBF1;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
overflow-x: hidden;
padding: 0;
margin: 0;
}
I tested some different methods but they didn't work. please check my image.
https://i.stack.imgur.com/OhAcu.png
I compare my code with some pages but can't find solution.
which one must I use ?
margin, overflow, width, position or another.
You might want to use css reset :)
* {
margin: 0;
padding: 0;
}
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 months ago.
Improve this question
<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">
<title>Document</title>
<style>
</style>
</head>
<body>
<div style="
display: grid;
grid-template-columns: 100px, 100px;">
<div style="background-color: lightblue;">div 1</div>
<div style="background-color: lightpink;">div 2</div>
</div>
</body>
</html>
I've been trying to make a grid in HTML and CSS and it's not working. Im new to CSS and HTML so please tell me what I did wrong thanks!
You should remove comma in grid-template-columns, write like this:
display: grid;
And
grid-template-columns: 100px 100px;
Also you can write like below and it's better
grid-template-columns: auto auto;
See here
There was just one error you have made in grid-template-columns there must be no comma should be included, so it must look like this grid-template-column:100px 100px;
<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">
<title>Document</title>
<style>
</style>
</head>
<body>
<div style="
display: grid;
grid-template-columns: 100px 100px;">
<div style="background-color: lightblue;">div 1</div>
<div style="background-color: lightpink;">div 2</div>
</div>
</body>
</html>
You can use grid-template-columns: auto in this case. Hope that solves you
<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">
<title>Document</title>
</head>
<body>
<div style="display: grid; grid-template-columns: auto auto auto;">
<div style="background-color: lightblue;">div 1</div>
<div style="background-color: lightpink;">div 2</div>
<div style="background-color: rgb(34, 192, 3);">div 2</div>
</div>
</body>
</html>
this is my code for my portfolio page and the links for my first row of images do not seem to be working
this screenshot shows which images links are not working
the CSS for this is here, so not too sure what i have done wrong
Check your folder structure first. Maybe that is the problem. Also, please write the code in your questions. It's easier for us to see the problem you are facing.
Added note
It's better in your case to make the parent element, div gallery, a grid.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.gallery {
margin: 20px;
display: grid;
grid-template-columns: auto auto auto;
grid-row-gap: 10px;
grid-column-gap: 10px;
text-align: center;
}
.gallery img {
width: 100%;
}
<!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">
<link rel="stylesheet" href="./index.css" />
<title>Document</title>
</head>
<body>
<div class="gallery">
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</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>