I have encountered a problem with the grid layout that I am using.
HTML:
<!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="style2.css">
<title>Grid training</title>
</head>
<body>
<div class="container">
<div class="text">
<h1>This is the title</h1>
<h3>This is the</br>lorem ispum doler sis amet</h3>
<input type="submit" value="Submit" class="cta">
</div>
<div class="image"></div>
</div>
CSS:
#import url('https://fonts.googleapis.com/css2?family=Rubik:wght#300;400;700;900&display=swap');
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Rubik', sans-serif;
}
.container{
padding-top: 50px;
width: 95%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
grid-gap: 15px;
}
.container > div{
height: 90vh;
}
.image{
background-image: url("img1.jpg");
background-size: cover;
}
.text{
display: flex;
flex-direction: column;
width: 65%;
margin-left: 50px;
}
.text h1{
margin: 50px 0;
font-weight: 900;
font-size: 85px;
}
.text h3{
font-weight: 300;
font-size: 35px;
}
.cat{
border-radius: 25px;
border-style: none;
font-size: 28px;
width: 150px;
height: 40px;
margin-top: 95px;
}
#media (max-width: 600px)
{
.container{
grid-template-columns: 1fr;
width: 95%;
}
.image{
width: 95%;
margin-left: auto;
margin-top: 25px;
}
}
However, the image on the right side is not responsive when I minimize the browser.
For this reason, I used media queries. Is this technique correct or is there an easier method?
Is there anything else I should consider about the code and make it responsive?
The idea you have going is correct, but I recommend for you to design first to mobile size then create media queries for your desktop sizes and tablet sizes etc. But, looking at your media query for phone size you do not need to declare a width size, and you need to make sure to include display:grid; in that class as well. You do not need class text and class image, when you declare the main class container and you say that it has two columns by writing grid-template-comlumns is set to 1fr 1fr then any new div inside there will be the new column and it i wll just add more rows the more divs you add.
<!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="style2.css">
<title>Grid training</title>
</head>
<body>
<div class="container">
<!-- if you choose to have this class text the class itself would only be for things like padding other than that it is not necessary-->
<div>
<h1>This is the title</h1>
<h3>This is the</br>lorem ispum doler sis amet</h3>
<input type="submit" value="Submit" class="cta">
</div>
<img src ="" />
<!-- as you can see the first div you have with h1 and h3 will be one piece in column 1 and then the img section will be another piece in column 2-->
</div>
css:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Rubik', sans-serif;
}
/* i would make it first mobile */
.container{
padding-top: 50px;
display: grid;
grid-template-columns: 1fr;
grid-row-gap: 3px;
}
.container > div{
height: 90vh;
}
img{
width: 90%
}
.image{
background-image: url("img1.jpg");
background-size: cover;
}
.text h1{
margin: 50px 0;
font-weight: 900;
font-size: 85px;
}
.text h3{
font-weight: 300;
font-size: 35px;
}
/* i think you mean cta */
.cat{
border-radius: 25px;
border-style: none;
font-size: 28px;
width: 150px;
height: 40px;
margin-top: 95px;
}
#media (min-width: 900px)
{
.container{
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 15px;
}
.image{
width: 95%;
margin-left: auto;
margin-top: 25px;
}
}
"responsive" can mean different things and you need to specify exactly what you want.
For the .image div, you are using a background-image, which means the image used is not setting the size of the <div>. If you want the content (the image) to set the size and the ratio of the <div>, the simplest solution is to use <img> tag instead of background-image:
#import url('https://fonts.googleapis.com/css2?family=Rubik:wght#300;400;700;900&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Rubik', sans-serif;
}
.container {
padding: 50px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
grid-gap: 15px;
min-height: 100vh;
}
.image img {
display: block;
width: 100%;
height: auto;
}
.text {
border: 50px solid #ccc;
padding: 50px 35% 50px 50px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.text h1 {
margin: 0;
font-weight: 900;
font-size: 85px;
}
.text h3 {
font-weight: 300;
font-size: 35px;
}
.cat {
border-radius: 25px;
border-style: none;
font-size: 28px;
width: 150px;
height: 40px;
margin-top: 95px;
}
#media (max-width: 1200px) {
.container {
grid-template-columns: 1fr;
grid-template-areas: 'image' 'text';
}
.image {
margin: 0;
grid-area: image;
}
.text {
grid-area: text;
}
}
#media (max-width: 768px) {
.text {
padding-right: 50px;
}
}
<!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="style2.css">
<title>Grid training</title>
</head>
<body>
<div class="container">
<div class="text">
<h1>This is the title</h1>
<h3>This is the<br>lorem ispum dolor sit amet</h3>
<input type="submit" value="Submit" class="cta">
</div>
<div class="image">
<img src="https://picsum.photos/600/400">
</div>
</div>
</body>
</html>
If, on the contrary, you want the image to fill its container and get cropped on either direction (depending on whether the container is landscape or portrait), you could keep background-image and use background-size: cover, while also centering it in the div (to make sure it gets cropped equally):
#import url('https://fonts.googleapis.com/css2?family=Rubik:wght#300;400;700;900&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Rubik', sans-serif;
}
.container {
padding: 50px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
grid-gap: 15px;
min-height: 100vh
}
.image {
background: url(https://picsum.photos/600/400) center /cover;
}
.text {
border: 50px solid #ccc;
padding: 50px;
padding-right: 35%;
padding-right: 20%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.text h1 {
margin: 0;
font-weight: 900;
font-size: 85px;
}
.text h3 {
font-weight: 300;
font-size: 35px;
}
.cat {
border-radius: 25px;
border-style: none;
font-size: 28px;
width: 150px;
height: 40px;
margin-top: 95px;
}
#media (max-width: 1200px) {
.container {
grid-template-columns: 1fr;
grid-template-areas: 'image' 'text';
}
.image {
margin: 0;
grid-area: image;
padding-bottom: 75%;
}
.text {
grid-area: text;
}
}
#media (max-width: 768px) {
.text {
padding-right: 50px;
}
}
<!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="style2.css">
<title>Grid training</title>
</head>
<body>
<div class="container">
<div class="text">
<h1>This is the title</h1>
<h3>This is the<br>lorem ispum dolor sit amet</h3>
<input type="submit" value="Submit" class="cta">
</div>
<div class="image"></div>
</div>
</body>
</html>
Side note (it's killing me): it's "dolor sit amet", not "doler sis".
Related
Assuming that we have all padding and borders at 0px, I need to collapse a div to the minimum content possible, just enough to fit the text inside.
As the screen becomes smaller, the div will, as it should do, become smaller as well. Here's an example:
Example one
In this example, the screen is at maximum size, and everything is fine.
As the screen gets smaller, in this second example below, the text, which is a div, breaks down predictably and preferably.
Second Example
In this second example, I've colored in the sides I want to disappear and turn into a margin. To be clear,
I want the text to stay fixed in space I just want the width trimmed down more and the borders to be tight and flush with the text.
I'm working within a grid container; the div is in a grid container. I'm looking for the most minimal and easy CSS/HTML to implement, trying to avoid any JavaScript. While I do think it's possible without JavaScript, If I need to use it, I will.
I've tried changing the grid-column width. This could be the solution, as I might have done it incorrectly.
As has been said, I was wanting to remove the white space around the text, not the margin, nor the padding. It's the width. The "Existe" needs somewhere to go, and it goes below the other text, leaving extra space on each side.
Any response is appreciated, thank you.
Source code:
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
* {
font-family: 'Roboto', sans-serif;
}
body, html {
background-color: #212529;
padding: 0px;
margin: 0px;
}
.button {
display: flex;
align-items:center;
justify-content:center;
height: 40px;
width: 80px;
margin-top: 5px;
margin-bottom: 5px;
padding: 0px;
border: 0px;
border-radius: 6%;
background-color: transparent;
color: #81a1c1;
font-size: 90%;
text-decoration: none;
}
.header {
display: grid;
grid-template-columns: 3fr 1fr 1fr;
grid-template-areas: "logo button-one button-two";
grid-gap: 1%;
margin-bottom: 1%;
border: 4x;
border-bottom-style: solid;
border-bottom-color: #81a1c1;
}
.logo {
position: relative;
grid-area: logo;
justify-self: center;
right: 20%;
font-size: x-large;
margin-top: 10px;
margin-bottom: 10px;
color: #81a1c1;
text-decoration: none;
}
.button-one {
grid-area: button-one;
justify-self: end;
font-weight: 600;
}
.button-two {
grid-area: button-two;
justify-self: center;
font-weight: 600;
}
.main-content-container {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "text pic";
width: 100%;
height: 90vh;
}
.text {
display: inline;
grid-area: text;
align-self: center;
justify-self: center;
text-align: center;
text-justify: center;
font-size: 5em;
color: #d8dee9;
border: 4px;
border-style: solid;
border-color: #81a1c1;
border-radius: 2%;
}
.picture {
grid-area: pic;
align-self: center;
justify-self: center;
border: 4px;
border-style: solid;
border-color: #81a1c1;
border-radius: 2%;
}
<!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">
<title>Nord</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="header">
<a class="logo" href="">Home</a>
<button class="button button-one" >Contact!</button>
<button class="button button-two">Email Me!</button>
</div>
</header>
<main class="main-content-container">
<!--<img class="content picture" src="nord.png" alt="nord-theme photo minimal white nord">-->
<div class="content text">Lorem Ipsum<span style="color: #81a1c1;"> Existe</span></div>
</main>
</body>
</html>
You can create a media query like this one:
#media (max-width: 750px) {
.text {
font-size: 4em;
}
}
to override your general rule. The 750px was an arbitrary value, you can use yours instead. Also, you could create several such media queries and you can vary the font-size and max-width in order to fulfill your needs. An example is in this fiddle (I tested on a laptop screen, maybe you do not see it similarly, so I attach a screenshot)
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
* {
font-family: 'Roboto', sans-serif;
}
body, html {
background-color: #212529;
padding: 0px;
margin: 0px;
}
.button {
display: flex;
align-items:center;
justify-content:center;
height: 40px;
width: 80px;
margin-top: 5px;
margin-bottom: 5px;
padding: 0px;
border: 0px;
border-radius: 6%;
background-color: transparent;
color: #81a1c1;
font-size: 90%;
text-decoration: none;
}
.header {
display: grid;
grid-template-columns: 3fr 1fr 1fr;
grid-template-areas: "logo button-one button-two";
grid-gap: 1%;
margin-bottom: 1%;
border: 4x;
border-bottom-style: solid;
border-bottom-color: #81a1c1;
}
.logo {
position: relative;
grid-area: logo;
justify-self: center;
right: 20%;
font-size: x-large;
margin-top: 10px;
margin-bottom: 10px;
color: #81a1c1;
text-decoration: none;
}
.button-one {
grid-area: button-one;
justify-self: end;
font-weight: 600;
}
.button-two {
grid-area: button-two;
justify-self: center;
font-weight: 600;
}
.main-content-container {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "text pic";
width: 100%;
height: 90vh;
}
.text {
display: inline;
grid-area: text;
align-self: center;
justify-self: center;
text-align: center;
text-justify: center;
font-size: 5em;
color: #d8dee9;
border: 4px;
border-style: solid;
border-color: #81a1c1;
border-radius: 2%;
}
#media (max-width: 750px) {
.text {
font-size: 4em;
}
}
.picture {
grid-area: pic;
align-self: center;
justify-self: center;
border: 4px;
border-style: solid;
border-color: #81a1c1;
border-radius: 2%;
}
<!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">
<title>Nord</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="header">
<a class="logo" href="">Home</a>
<button class="button button-one" >Contact!</button>
<button class="button button-two">Email Me!</button>
</div>
</header>
<main class="main-content-container">
<!--<img class="content picture" src="nord.png" alt="nord-theme photo minimal white nord">-->
<div class="content text">Lorem Ipsum<span style="color: #81a1c1;"> Existe</span></div>
</main>
</body>
</html>
Try using a max-width property in your css or add a media query with the max-width.
I dynamically create grid items. When i create a large amount of grid items I would like them to get smaller and fit into container, instead of having overflow-y: scroll. How can do this ?. I shared my code below :html, css. Would be very grateful if anybody can help me.
By default I divide my container into 4 col, but my goal is , when we creating a lot of items, I want them to fit into container and not create any scroll.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section {
aspect-ratio: 5/2;
border: 1px solid rgb(187, 185, 185);
margin: 0 4rem;
width: 100%;
border-radius: 10px;
overflow: hidden;
padding: 2rem;
}
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2em;
height: 100%;
}
.left,
.right {
border: 1px solid rgb(187, 185, 185);
border-radius: 10px;
}
.right {
display: grid;
overflow-y: scroll;
grid-template-columns: repeat(4, 1fr);
align-content: flex-start;
}
.item-place {
width: 100%;
}
.item {
width: 100%;
}
.item img {
width: 100%;
object-fit: cover;
}
<!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">
<title>grid-css</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button> Create grid item</button>
<section>
<div class="container">
<div class="left"></div>
<div class="right">
<!-- grid items will apear here -->
</div>
</div>
</section>
<script src="app.js"></script>
</body>
</html>
I have four divs on my page and each one of them has a link. The problem is, I want the links to be the same width and height as the boxes, but for some reason the links stretch more than they should, and as a result the whole container which contains the four divs is clickable.
I've tried setting the anchor tags to display:inline-block; but that didn't work.
How do I fix this?
Codepen
EDIT: Fixed it by wrapping the anchor tags in divs.
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--nav-clr: #ebebeb;
--box-r: #f94144;
--box-g: #43AA8B;
--box-y: #F9C74F;
--box-b: #577590;
}
body,
html {
height: 100vh;
font-family: 'Montserrat', sans-serif;
}
/* nav bar */
nav {
display: flex;
height: 60px;
background-color: var(--nav-clr);
align-items: center;
}
.logo {
width: 150px;
height: auto;
margin-left: 1em;
}
/* buttons */
.box-btn {
/* margin: 20px; */
width: auto;
height: 259px;
background: #43AA8B;
border-radius: 30px;
position: relative;
}
.box-btn::after {
content: '';
position: absolute;
display: inline-block;
/* margin: 20px; */
width: 100%;
bottom: 0;
rightt: 0;
height: 100px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
background: var(--nav-clr);
z-index: 1;
}
.content {
display: grid;
justify-content: center;
grid-template-columns: repeat(auto-fit, 250px);
gap: 20px;
/* background-color: red; */
}
/* main */
.main-wrapper {
height: 100vh;
display: grid;
justify-content: center;
grid-template-columns: 80vw;
grid-template-rows: 25% 5% 65%;
/* gap: 20px; */
}
/* header */
.title-wrapper {
margin: 70px;
display: inline-block;
font-size: 1.3em;
text-align: center;
grid-row: 1/3;
}
/* SMALLER SCREENS */
#media screen and (max-width:700px) {
.title-wrapper {
font-size: 1em;
margin: auto;
}
nav {
justify-content: center;
}
}
#media screen and (max-width:626px) {
.content {
grid-template-columns: repeat(auto-fit, 350px);
}
.box-btn {
height: 350px;
}
.box-btn::after {
width: 100%;
height: 135px;
bottom: 0;
}
}
#media screen and (max-width:405px) {
.title-wrapper {
font-size: .8em;
}
}
<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="style.css">
<title>T3 Dashboard</title>
</head>
<body>
<div class="wrapper">
<nav>
<a href="http://t3-ks.com/">
<div class="logo-container">
<img src="/t3s.svg" alt="" class="logo">
</div>
</a>
</nav>
<main>
<div class="main-wrapper">
<div class="title-wrapper">
<h1>Menaxhimi i burimeve njerëzore</h1>
</div>
<div class="content">
<a href="">
<div class="box-btn"></div>
</a>
<a href="">
<div class="box-btn"></div>
</a>
<a href="">
<div class="box-btn"></div>
</a>
<a href="">
<div class="box-btn"></div>
</a>
</div>
</div>
</main>
</body>
</html>
I tried to change some css in the grey area. Is this what you want? If you want an element to be on the bottom, you can set bottom: 0; to its css when positioned absolute.
I would add to your most external container the css property pointer-events: none and to the internal one pointer-events:all. If what you want is not giving click feature to the external containers, this might solve the issue.
.content > a {
pointer-events: none;
}
.box-btn {
pointer-events: all;
}
So I've been trying to overlap grid 2 over grid 1 without using negative margins but I'm unable to do so please help
Here's my code
index.html
<!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" />
<title>Document</title>
<link rel="stylesheet" href="./styles/styles.css" />
</head>
<body>
<div class="HeaderContainerGrid">
<img src="./svg/background.svg" />
<header>
<h1>Guideline</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
styles.scss
#import './variables';
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
img {
width: 100%;
}
header {
grid-template-columns: 1fr 1fr;
display: grid;
align-items: end;
justify-content: end;
h1 {
display: grid;
height: 100%;
align-items: center;
margin-left: 1em;
}
nav {
height: 100%;
display: grid;
align-items: center;
grid-template-columns: 1fr;
}
ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
text-decoration: none;
list-style: none;
}
li {
margin-left: 10px;
margin-right: 10px;
padding: 20px;
text-align: center;
&:hover {
cursor: pointer;
background-color: $secondaryColor;
transition: 0.5s;
color: $onHoverTextColor;
}
}
}
.HeaderContainerGrid {
display: grid;
&:nth-child(1) {
background-color: red;
grid-row: 1 / 2;
z-index: 1
}
&:nth-child(0) {
grid-row: 1 / 2;
z-index: -1
}
}
CodeSandbox URL
Make header position absolute so that it will come out from its normal flow and come over the nearest relative position.
DEMO
header{
position: absolute;
}
.HeaderContainerGrid {
position: relative;
}
I'm fairly new to html css and started building a landing page that I got from the front end mentor challenges shown below. So it far it looks good on desktop.
Coming soon landing page
However, I'm having trouble making it responsive. I tried to change the grid template columns to rows but it just didn't work. Why is this?
Here's my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<nav class="top-img">
<div class="container">
<img src="./images/logo.svg" class="navbar-brand" alt="#">
</div>
</nav>
<!-- Section hero-->
<section id="hero">
<div class="grid">
<div class="hero-text">
<h1>We're<span> Coming Soon</span></h1>
<p>Hello fellow shoppers! We're currently building our new fashion store. Add your email below to stay up-to-date with announcements and or launch deals.</p>
<div class="icons">
<i class="fas fa-chevron-right"></i>
<input type="text" placeholder="Email Address">
</div>
</div>
<div class="hero-img">
<img src="./images/hero-desktop.jpg" alt="#">
</div>
</div>
</section>
<script src="https://kit.fontawesome.com/732aafddc7.js" crossorigin="anonymous"></script>
</body>
</html>
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* primary */
--desaturated-color: hsl(0, 36%, 70%);
--soft-red: hsl(0, 93%, 68%);
/*neutral*/
--dark-red: hsl(0, 6%, 24%);
/* font size - body: 16px */
--body-font: 16px;
}
.container {
/*max-width: 1200px;*/
padding: 2rem 3rem;
}
#hero {
background: url(../images/bg-pattern-desktop.svg) no-repeat center center/cover;
height: 100vh;
position: relative;
overflow: auto;
}
.navbar-brand {
padding-left: 3rem;
}
.hero-text {
width: 60%;
display: block;
padding-top: 3rem;
margin-top: 10rem;
margin-left: 6rem;
}
.hero-text h1 {
text-transform: uppercase;
color: var(--desaturated-color);
font-size: 3.5rem;
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
letter-spacing: 20px;
margin-bottom: 1.5rem;
}
.hero-text p {
font-size: var(--body-font);
color: var(--desaturated-color);
margin-bottom: 2rem;
line-height: 2;
}
.hero-text span {
color: var(--dark-red);
font-weight: 600;
}
.top-img {
position: absolute;
z-index: 1;
}
.hero-img img {
width: 100%;
height: 100vh;
}
.grid {
display: grid;
grid-template-columns: 3fr 2fr;
}
input[type=text] {
width: 100%;
padding: 1rem;
border-radius: 25px;
border: 1px solid var(--desaturated-color);
border-color: var(--desaturated-color);
}
::placeholder {
color: var(--desaturated-color);
}
.icons {
position: relative;
}
.icons i {
position: absolute;
top: 1px;
right: 0px;
color: #fff;
background: linear-gradient(135deg, hsl(0, 80%, 86%), hsl(0, 74%, 74%));
padding: 0.5rem 3rem;
height: 100%;
font-size: 1.5rem;
border-radius: 25px;
display: flex;
align-items: center;
}
#media (max-width: 768px) {
.grid {
grid-template-rows: 3fr 2fr;
}
}
You're specifying grid-template-columns outside of your media query; and thus, it is being applied to all screen sizes. To fix, you simply need to specify in your media query that you don't want your content to be displayed in columns - and then your current grid-template-rows element will work correctly.
See below:
#media (max-width: 768px) {
.grid {
grid-template-columns: none; /* ADD THIS */
grid-template-rows: 3fr 2fr;
}
}
JSFiddle
At the media query add this row under grid-template-rows:
grid-template-columns: none;
You have to overwrite the specified columns, or it will be applied to the responsive version too.
Please put grid-template-columns: none;
#media (max-width: 768px) {
.grid {
grid-template-rows: 3fr 2fr;
grid-template-columns: none;
}
}
Or another way user display: block; for a mobile version.
#media (max-width: 768px) {
.grid {
display: block;
}
}
in responisve first reset grid column then apply row it will work