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.
Related
I have a logo on the far left. There is a div container in the middle and a div container on the far left. All packed together in a div container.
I have the middle container on margin: auto; adjusted so that it has the same distance on both sides.
The problem is that if I move the logo left or right, the middle container also moves. How can I ensure that the middle container always stays in the middle no matter what happens left or right?
body {
margin: 0%;
font-family: Arial, Helvetica, sans-serif;
}
.container1 {
height: 70px;
background-color: #e7e0e0;
display: flex;
justify-content: space-between;
align-items: center;
}
.container12 {
margin-left: 50px;
}
.container12 h1 {
font-size: 20px;
}
.container13 {
margin-right: 25px;
}
.container13 a {
margin: 0%;
text-decoration: none;
color: black;
float: inline-start;
}
.container13 a:hover {
text-decoration: underline;
}
.trennlinie {
border-right: 1px solid grey;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 12.5px;
}
.trennliniehilfe {
padding-left: 12.5px;
padding-top: 15px;
padding-bottom: 15px;
}
.container2 {
height: 80px;
border-bottom: 1px solid rgb(187, 187, 187);
display: flex;
align-items: center;
}
.airbnblogo {
width: 50px;
}
.airbnbcont {
margin-left: 110px;
;
}
.mittecontainer {
display: flex;
margin: auto;
float: inline-start;
background-color: rgb(214, 212, 212);
border: 2px solid black;
border-radius: 15px;
padding-right: 5px;
}
.mittecontainer p {
margin-left: 11.5px;
}
.part3 {
display: flex;
align-items: center;
margin-right: 35px;
}
.derretter {
margin-right: 15px;
}
.interneticon {
margin-right: 15px;
width: 30px;
}
.Pics img {
width: 250px;
vertical-align: middle;
}
.Pics {
display: flex;
justify-content: center;
margin-top: 80px;
border: 2px solid white;
}
.p1 {
border-right: 1px solid grey;
padding-right: 12.5px;
}
.p2 {
border-right: 1px solid grey;
padding-right: 12.5px;
}
.Pics p {
display: flex;
justify-content: center;
}
.pics2 {
background-color: black;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
border-radius: 10px;
}
.pics2 p {
background-color: black;
color: white;
border: 2px solid white;
border-radius: 15px;
padding: 5px;
}
.pics2 p:hover {
background-color: white;
color: black;
}
.ia {
width: 30px;
}
<!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>Airbnb.com</title>
</head>
<body>
<div class="container1">
<div class="container12">
<h1>Hier kommt das Airbnb 2022: Winter-Update</h1>
</div>
<div class="container13">
<a class="trennlinie" href="">Film abspielen</a>
<a class="trennliniehilfe" href="">Alle Neuigkeiten entdecken</a>
</div>
</div>
<div class="container2">
<div class="airbnbcont">
<img class="airbnblogo" src="airbnb.png">
</div>
<div class="mittecontainer">
<p class="p1">Irgendwo</p>
<p class="p2">Eine Woche</p>
<p>Gäste hinzufügen</p>
</div>
<div class="part3">
<div class="derretter">
<p>Als Gastgeber:in loslegen</p>
</div>
<div class="interneticon">
<img class="ia" src="internet.png" alt="">
</div>
<div>
<img class="ia" src="menu.png" alt="">
</div>
</div>
</div>
<div class="Pics">
<div class="pics2">
<img src="din1.jpg"> <br>
<p>Jetzt Flug sichern!</p>
<p>Weitere Infos</p>
<p>Standort</p>
</div>
</div>
</body>
</html>
Inside the container2 class in the style tag, replace display: flex; to be display: grid; and add grid-template-columns: 25% 50% 25%;. Like this:
.container2 {
height: 80px;
border-bottom: 1px solid rgb(187, 187, 187);
display: grid;
grid-template-columns: 25% 50% 25%;
align-items: center;
}
And don't forget if there are too many CSS styles, then make an external CSS link so that giving css styles is easier.
I am working on a side project of mine where I have an HTML and CSS file. I started working on it from a mobile-first approach and things were looking good. But then I needed to make it a responsive design and added the following tag the CSS broke and did not work properly.
<meta name="viewport" content="width=device-width, initial-scale=1">
:root {
--black: #191414;
--green: #1DB954;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap') * {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
background-color: #181818;
}
.container {
display: grid;
grid-template-rows: min-content 8fr 1fr;
background-color: #181818;
width: 100vw;
height: 100vh;
}
.main {
display: grid;
grid-template-columns: min-content 1fr;
}
.music-img {
width: 300px;
height: 300px;
object-fit: cover;
margin: 50px 50px;
}
.music-details {
display: flex;
flex-direction: column;
}
.music-name {
font-family: 'Roboto', sans-serif;
font-size: 35px;
color: #ffffff;
margin-top: 50px;
}
.album-name {
font-family: 'Roboto', sans-serif;
font-size: 30px;
color: #8e8e8e;
margin-top: 10px;
}
#play,
#forward,
#backward,
#share,
#heart {
width: 32px;
height: 32px;
margin: 20px 15px;
}
.list {
overflow: auto;
display: flex;
flex-direction: column;
-ms-overflow-style: none;
scrollbar-width: none;
/* Firefox */
}
.list::-webkit-scrollbar {
display: none;
}
.footer {
background-color: var(--black);
display: flex;
flex-direction: row;
justify-content: space-around;
align-content: center;
}
.song-name {
font-family: 'Roboto', sans-serif;
font-size: 10px;
color: #ffffff;
}
.song-band {
font-family: 'Roboto', sans-serif;
font-size: 8px;
color: #8e8e8e;
}
.song-detail {
margin: 10px 50px;
}
#test {
color: #ffffff;
width: 100px;
height: 100px;
}
#home,
#search,
#library {
width: auto;
height: calc(100vh*0.05);
margin: 30px auto;
}
.song-detail:last-child {
margin-bottom: 25px;
}
#media screen and (min-width: 768px) {
.footer {
background-color: red;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Spotify</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="main">
<div class="img">
<img src="assets/album.jpg" class="music-img"></img>
</div>
<div class=music-details>
<div class="music-name">
Justice Beaver
</div>
<div class="album-name">
The Office
</div>
<div class="play-items">
<span><img src="assets/backward.png" id="backward"></img></span>
<span><img src="assets/play.png" id="play"></img></span>
<span><img src="assets/forward.png" id="forward"></img></span>
<br>
<span><img src="assets/heart.png" id="heart"></img></span>
<span><img src="assets/share.png" id="share"></img></span>
</div>
</div>
</div>
<div class="list">
<div class="song-detail">
<div class="song-name">Celebration</div>
<div class="song-band">KOOL & THE GANG</div>
</div>
</div>
<div class="footer">
<span><img src="assets/home.png" id="home"></img></span>
<span><img src="assets/search.png" id="search"></img></span>
<span><img src="assets/library.png" id="library"></img></span>
</div>
</div>
</body>
</html>
Here is the image before adding the above tag
And here is the image after I added the above tag
I and not sue what is wrong here. Any help would be appreciable.
Thanks
You have some issues in that code. First, you didn´t made the cassette img responsive, because you gave him a px size, then the img can´t resize, it´s static. If you want to make an img responsive, you have to use relative sizes, like "%" or "vw". Then you have to do the same with the icons, or at least add a media query for smaller devices and give them smaller sizes in px.
Same thing applies to the font size, it´s better to work with "em" or "rem", because they are relative sizes.
Then, i don´t know why you added this code
#media screen and (min-width: 768px) {
.footer {
background-color: red;
}
}
Because of the media query, this code only adds red color on devices that are bigger than 768, so tablets and cellphones won't apply
You should use it the simple way
.footer {
background-color: red;
}
I think that´s a good start point to start making it responsive.
You can start by trying to make these changes.
.music-img {
width: 15vw;
height: 15vh;
object-fit: cover;
margin: 50px 50px;
}
.music-name {
font-family: 'Roboto', sans-serif;
font-size: 1em;
color: #ffffff;
margin-top: 50px;
}
.album-name {
font-family: 'Roboto', sans-serif;
font-size: 0.8em;
color: #8e8e8e;
margin-top: 10px;
}
#play,
#forward,
#backward,
#share,
#heart {
width: 25px;
height: 25px;
margin: 20px 15px;
}
.footer {
background-color: red;
}
Then I think you would figure it out the rest.
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".
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
Hey so I'm trying to have black borders in between each tab at the top of my page (shown below), however when I try to add border-left: ; it adds it to the text in the cell rather than the cell itself.
I have tried adding:
height: 100%;
width: 100%;
but this messes with the text inside as well.
This is where I would want the border to be:
and this is where I would want the text to be:
html,
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #70614b;
}
.banner {
display: grid;
z-index: 1;
position: fixed;
width: auto;
height: 90px;
background-color: #d7cdc7;
grid-template: 100% / 20% repeat(5, 1fr);
grid-gap: 2px;
justify-items: center;
align-items: center;
}
.logo img {
width: 100%;
height: auto;
}
.about {
grid-area: 1 / 2 / span 1 / span 1;
}
.tabs {
font-family: Roboto;
font-size: 40px;
font-weight: bold;
text-align: center;
border-left: 2px black solid;
}
<html>
<head>
<link href="./style.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="banner">
<div class="logo"><img src="./photos/aa logo.png" /></div>
<div class="about tabs">ABOUT</div>
</div>
</body>
</html>
Without modifying your stylesheet too much, I'd suggest giving your tabs selector the height of its parent and then aligning the text using flex. It should look like this:
.tabs {
font-family: Roboto;
font-size: 40px;
font-weight: bold;
text-align: center;
border-left: 2px black solid;
height: 100%;
display: flex;
align-items: center;
}
Hope it helps!