Im learning more about grids in CSS. I have created a grid of four images and a textbox that describes the images. I cannot get the items to align next to each other. I want to have the textbox on the left side and the images on the right but I cannot get it to align next to each other. The images are slightly on the right but it's sitting low. How can i get the grid images to align next to the textbox? (text on left and images on right)
#grid-container{
width: 600px;
height: 600px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
}
#image{
height: 300px;
width: 350px;
}
.grid-item{
width: 300px;
height: 300px;
display: flex;
}
.grid-item:nth-of-type(1){
grid-column: 1 / 2;
grid-row: 1 / 2;
transform: translate(-50px,100px);
}
.grid-item:nth-of-type(2){
grid-column: 1 / 2;
grid-row: 2 / 2;
transform: translate(-0,100px);
}
.grid-item:nth-of-type(3){
grid-column: 2 / 2;
grid-row: 1 / 2;
transform: translate(-10px, -0px);
}
.grid-item:nth-of-type(4){
grid-column: 2 / 2;
grid-row: 2 / 2;
transform: translate(-5px,0px);
}
.overview{
display: flex;
width: 30%;
}
.overview-text{
text-align: center;
}
.flex-box{
display: flex;
}
<!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>
<header>
<h1>How to layer and overlap elements</h1>
</header>
<div class="overview">
<div class="overview-text">
<h1>Overview Text</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div class="flex-box">
<div id = "grid-container">
<div class="grid-item">
<img id = "image" src = "Image">
</div>
<div class="grid-item">
<img id = "image" src = "Image/">
</div>
<div class="grid-item">
<img id = "image" src = "Image/">
</div>
<div class="grid-item">
<img id = "image" src = "Image">
</div>
</div>
</div>
</body>
</html>
You should use the .flex-box as the container of both text and grid images. I also add margin-left: 100px to the grid since it has transform that overflows:
#grid-container {
width: 600px;
height: 600px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
margin-left: 100px;
}
#image {
height: 300px;
width: 350px;
}
.grid-item {
width: 300px;
height: 300px;
display: flex;
}
.grid-item:nth-of-type(1) {
grid-column: 1 / 2;
grid-row: 1 / 2;
transform: translate(-50px, 100px);
}
.grid-item:nth-of-type(2) {
grid-column: 1 / 2;
grid-row: 2 / 2;
transform: translate(-0, 100px);
}
.grid-item:nth-of-type(3) {
grid-column: 2 / 2;
grid-row: 1 / 2;
transform: translate(-10px, -0px);
}
.grid-item:nth-of-type(4) {
grid-column: 2 / 2;
grid-row: 2 / 2;
transform: translate(-5px, 0px);
}
.overview {
display: flex;
width: 30%;
}
.overview-text {
text-align: center;
}
.flex-box {
display: flex;
justify-content: center;
}
<!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>
<header>
<h1>How to layer and overlap elements</h1>
</header>
<div class="flex-box">
<div class="overview">
<div class="overview-text">
<h1>Overview Text</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div>
<div id="grid-container">
<div class="grid-item">
<img id="image" src="Image">
</div>
<div class="grid-item">
<img id="image" src="Image/">
</div>
<div class="grid-item">
<img id="image" src="Image/">
</div>
<div class="grid-item">
<img id="image" src="Image">
</div>
</div>
</div>
</div>
</body>
</html>
Related
Using the HTML and CSS below, you'll notice that rather than shrinking to fit the browser window, the site gets a horizontal scroll bar when shrunk down to 189px width. I've gone through my code and I cannot seem to figure out why this is happening. Keep in mind I'm a newbie so I might very well have overlooked something.
Also, I have a bonus question if that is allowed: I want to shrink the menu height but it seems impossible. How would you go about it?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="index.css">
<title></title>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>Title</h1>
</div>
<div class="menu">
about <br>
contact <br>
donate <br>
</div>
<div class="pic">
<img src="roshi.jpg" alt="roshi">
</div>
<div class="content">
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="content2">
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="footer">
Footer
</div>
</div>
</body>
</html>
html body {
margin: 0 auto;
font-family: "Raleway", sans-serif;
}
.wrapper {
margin: 0 auto;
display: grid;
grid-gap: 10px;
grid-template-areas:
"header"
"menu"
"pic"
"content"
"content2"
"footer";
}
.header {
grid-area: header;
background-color: lightgrey;
}
.header h1 {
margin-left: 0;
padding-left: 0;
}
.menu {
grid-area: menu;
padding: 0;
line-height: 2;
}
.menu a {
text-decoration: none;
}
.menu a:link {
color: black;
}
.pic {
grid-area: pic;
}
img {
width: 100%;
height: auto;
}
.content {
grid-area: content;
}
.content2 {
grid-area: content2;
}
.footer {
grid-area: footer;
background-color: lightgrey;
}
.wrapper > * {
margin: 0px 30px;
}
.header, .footer {
padding: 0px 30px;
}
#media screen and (min-width: 500px) {
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"header header"
"menu menu"
"pic pic"
"content content2"
"footer footer";
}
.menu {
display: flex;
flex-direction: row;
margin-left: auto;
}
.menu a {
padding-right: 10px;
}
}
JSFiddle link: https://jsfiddle.net/tzrqf5np/
I fixed your CSS as you wanted. You really should start making sure you get your spacings right. it has no direct influence in HTML and CSS but helps reading and is a good practise for other languages. There plently languages where spacings make a difference if a code works or not. But having it easier to read espacially with programs like Visual Studio Code the advantage is that you see which closing tags belong to which starting tag.
Please try to practice it for me "my little padawan" :P
Ok One change of formatting was to the media query:
#media only screen
and ...
and ... {
body {
random-code: xy;
}
}
espacilly if you use media query to adress screens use only screen. Even it works nearly always take it as a good habit same as getting your spacings right. Then get a new line with and... what every you want to use. you can combine that way many rules like min-width and max-width, orientation: landscape/portrait screen format...
then you used: grid-template-rows: 1fr 1fr; I switched it to grid-template-columns: 1fr 1fr; and added the grid-auto-rows: auto; and tada: its working. The menu is way smaller just like you wanted.
Next the picture got a width of auto. that way it shouldnt create a horizontal scrollbar. a width of 100% will as it will add the 100% to the margin and paddings on top and then the width is wider then the screen.
html body {
margin: 0 auto;
font-family: "Raleway", sans-serif;
}
.wrapper {
margin: 0 auto;
display: grid;
grid-auto-rows: auto;
grid-gap: 10px;
grid-template-areas:
"header"
"menu"
"pic"
"content"
"content2"
"footer";
}
.header {
grid-area: header;
background-color: lightgrey;
}
.header h1 {
margin-left: 0;
padding-left: 0;
}
.menu {
grid-area: menu;
padding: 0;
}
.menu a {
text-decoration: none;
}
.menu a:link {
color: black;
}
.pic {
grid-area: pic;
}
img {
width: 100%;
height: auto;
}
.content {
grid-area: content;
}
.content2 {
grid-area: content2;
}
.footer {
grid-area: footer;
background-color: lightgrey;
}
.wrapper > * {
margin: 0px 30px;
}
.header, .footer {
padding: 0px 30px;
}
#media only screen
and (min-width: 500px) {
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr;
grid-auto-rows: auto;
grid-template-areas:
"header header"
"menu menu"
"pic pic"
"content content2"
"footer footer";
}
.menu {
display: flex;
flex-direction: row;
margin-left: auto;
}
.menu a {
padding-right: 10px;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="index.css">
<title></title>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>Title</h1>
</div>
<div class="menu">
about<br>
contact<br>
donate
</div>
<div class="pic">
<img src="roshi.jpg" alt="roshi">
</div>
<div class="content">
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="content2">
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
I'm practicing my CSS skills and as you can see below, I've managed to get all my main content between header and footer to line up nicely by using margin: auto.
However I am stuck on figuring out how I get a nice layout going within the footer. What I want is:
Mobile view: To have the footer elements stack vertically and in line with the rest of the site content.
Fullscreen (500px+): Have the footer elements line up horizontally and in line with the rest of the site content.
I've tried to use margin: auto like I did with the main content but it doesn't work.
I can't get the elements inside the footer to do anything, I can actually only see the embedded map for some reason I can't understand.
I hope someone can help me out. Thanks
https://jsfiddle.net/y40vcw1q/
html body {
margin: 0;
background-color: #DCDBF1;
font-family: "Raleway", sans-serif;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-areas:
"header"
"menu"
"content"
"content2"
"footer"
}
.wrapper > .content, .content2, .footercontent {
margin: 0 auto;
line-height: 2;
max-width: 50%;
}
.header {
grid-area: header;
border-bottom: #EFEEFC solid 1px;
}
.header h1 {
text-align: center;
}
.menu {
display: flex;
flex-direction: row;
grid-area: menu;
line-height: 2em;
padding-left: 20px;
}
.menu a {
padding-right: 10px;
}
.menu a:link {
text-decoration: none;
color: #666666;
}
.content {
grid-area: content;
}
.content2 {
grid-area: content2;
}
.content img {
height: auto;
width: 100%;
max-width: 200px;
border: solid black 1px;
}
.content2 img {
height: auto;
width: 100%;
max-width: 200px;
border: solid black 1px;
}
.footer {
grid-area: footer;
border-top: #EFEEFC solid 1px;
padding: 20px 0px;
background-color: #E595B3;
font-size: small;
}
.footer iframe {
border: 1px solid black;
height: auto;
width: 100%;
max-width: 200px;
}
#media screen and (min-width: 500px) {
.wrapper {
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"header header"
"menu menu"
"content content2"
"footer footer"
}
.header h1 {float: right;
padding-right: 50px;}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
<title></title>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>title.</h1>
</div>
<div class="menu">
<div class="menuitem">
about
</div>
<div class="menuitem">
contact
</div>
<div class="menuitem">
cv
</div>
</div>
<div class="content">
<h1>Content</h1>
<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/nature-quotes-1557340276.jpg?crop=0.666xw:1.00xh;0.168xw,0&resize=640:*" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Content 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="content2">
<h1>Content 3</h1>
<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/nature-quotes-1557340276.jpg?crop=0.666xw:1.00xh;0.168xw,0&resize=640:*" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Content 4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="footer">
<div class="footercontent">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12087.828828834796!2d-74.00234906126316!3d40.7629659216891!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25850a4606051%3A0x1976b26060ef9a02!2sHell's%20Kitchen%2C%20New%20York%20City%2C%20New%20York%2C%20USA!5e0!3m2!1sda!2sdk!4v1598647639460!5m2!1sda!2sdk"</iframe>
<h1>About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<h1>Archive</h1>
<ul>
<li>jan</li>
<li>feb</li>
<li>mar</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I am trying to mock up a design for a personal/resume website, the page looks how I intended it too before resizing the page, but after resizing to mobile some of the elements on my page don't occupy the entire width of the screen(I am using a single column on mobile).
I have a 2 column layout on desktop, which changes to a single column layout for mobile with a media query, the problem occurs after the breakpoint for the media query. I have added "width=100%" to all of the elements that are impacted, as well as tried to turn on and off each style rule, such as margin and padding, individually in chrome developer tools. After several days I'm sure I am just missing whatever the problem is, or have a fundamental misunderstanding.
Screenshot of mobie layout issue
My HTML
<div class="wrapper">
<div class="intro-box">
<h1>Who am I, and where am I going?</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="bio-box">
<div class="photo-box">
<h2>Thanks for discovering more about me</h2>
<img src="davidSized.jpg" alt="David's Photo">
</div>
</div>
<div class="content-wrapper">
<h1>Learn about me here...</h1>
<div class="selector-one selector">
<h2>My Resume</h2>
</div>
<div class="selector-two selector">
<h2>About Me</h2>
</div>
<div class="selector-three selector">
<h2>More stuff</h2>
</div>
<div class="content">
<p class="para-one"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="contact-info-box">
<h3>Reach out to me here....</h3>
<ul class="contact-info">
<li>david_jhall#yahoo.com</li>
<li>LinkedIn Profile</li>
<li>Facebook Profile</li>
<li>More ways to contact me....</li>
</ul>
</div>
</div>
My meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
the wrapper element before the media query
wrapper{
display: grid;
grid-template-columns: 30% auto;
grid-template-rows: repeat(5 , auto);
grid-gap: 15px;
}
the wrapper element after the media query
.wrapper{
grid-template-columns: auto;
justify-content: center;
}
the elements that don't span the whole page on mobile (before the mq)
.intro-box{
grid-column: 1/3;
margin: 0px;
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1)),border-box,url("road.jpg") no-repeat center center;
background-size: cover;
color: lightgrey;
min-height: 750px;
max-width: 100%;
padding: 0;
}
.bio-box{
margin: 10px;
border: 5px solid rgba(0, 0, 0, 0.25);
text-align: center;
border-radius: 10%;
min-height: 500px;
}
.content-wrapper{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto 50%;
text-align: center;
min-height: 500px;
grid-gap: 5px;
max-width: 100%;
justify-content: center;
}
.content{
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)),border-box;
grid-column: 1/-1;
}
mq and the elemnts within it
#media screen and (max-width:700px){
.wrapper{
grid-template-columns: auto;
justify-content: center;
}
.intro-box > h1{
font-size: 3em;
padding: 20px;
}
.bio-box{
grid-row: 3/4;
grid-column: 1/3;
}
.content-wrapper{
margin: 0 auto;
grid-column: 1/3;
justify-self: center;
}
.content{
padding: 20px;
margin: 0 auto;
margin-bottom: 50px;
width: 100%;
}
}
Remember that padding is internal to the border of the column, so makes little difference here. Also remeber that classes are gonna be your best friend with this sort of thing, simple change some CSS of the single class in a media query and add this class to each column you want to change for mobile. That way you reduce how much code you chuck into each MQ.
Firstly, as a quick-fix (but ideally not permanent) try adding in the MQ, this CSS:
.your-div-class {
width: 100%;
right: 0;
}
Also, disable your x-overflow (of the body) to avoid any nasty side-scrollbars!
See whether the ' right: 0; ' property helps bring it fully to the right.
Here's what I would do:
Give each column the same class of "responsive-col" or something, then pop this into an MQ, and style it like so:
#media screen and (max-width:700px){
.responsive-col {
margin: 0;
right: 0;
width: 100%;
font-size: 22px;
display: block;
}
}
There's loads to say, but this would hopefully solve it and if you have another question I'll just answer that.
Kieron
So I have a three column layout which on the surface seems to be working fine. However when you inspect the page in the developer tools, you can see that the third column in the middle's margin is actually overlapping with the second and third columns that I've floated on either side. Furthermore when I attempted to use media queries it seems like it's not working out for mobile devices. I know I can use a framework like flexbox or bootstrap but I honestly want to learn how to do this BEFORE i use a framework. I don't wanna rely on that in case i get in a coding interview and they ask me to do this without a framework.
So in short:
-I want to make my margin smaller on a three column layout.
-I would like a column layout on mobile devices.
My code is below
`<!DOCTYPE html>
<html>
<head>
<title>Nav Page </title>
<meta charset="utf-8">
<link rel="stylesheet" href="le.css">
</head>
<body>
<h1>Column Layout</h1>
<div class="col1">
<h2>Column 1</h2>
<p>
"Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis
nostrud exercitation ullamco
laboris nisi ut aliquip ex ea
commodo consequat. Duis aute
irure dolor in reprehenderit in
voluptate velit esse cillum dolor
e eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui
officia deserunt mollit anim id
est laborum."
</p>
</div>
<div class="col2">
<h2>Column 2</h2>
<p>
"Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis
nostrud exercitation ullamco
laboris nisi ut aliquip ex ea
commodo consequat. Duis aute
irure dolor in reprehenderit in
voluptate velit esse cillum dolor
e eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui
officia deserunt mollit anim id
est laborum."
</p>
</div>
<div class="col3">
<h2>Column 3</h2>
<p>
"Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis
nostrud exercitation ullamco
laboris nisi ut aliquip ex ea
commodo consequat. Duis aute
irure dolor in reprehenderit in
voluptate velit esse cillum dolor
e eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui
officia deserunt mollit anim id
est laborum."
</p>
</div>
</body>
</html>
`
This is my CSS
* {
box-sizing: border-box;
}
.col1 {
width: 25%;
float: left;
margin: auto;
border: 1px solid black;
}
.col2 {
width: 25%;
float: right;
margin: auto;
border: 1px solid black;
}
.col3 {
width:25%;
heigth: 50px;
margin: auto;
border: 1px solid black;
}
h1 {
text-align: center;
}
#media screen and (max-width: 575px) {
.col1 {
float:none;
}
.col2 {
float:none;
}
.col3 {
float:none;
}
}
Pure CSS, use Grid instead of floats, floats is the old way of doing layouts.
/* general style */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1{
text-align: center;
margin: 1rem 0;
}
/* css grid layout */
.layout{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 4rem;
padding: 0 2rem;
}
.layout div{
border: 1px solid black;
}
#media (max-width: 575px) {
.layout{
grid-template-columns: 1fr;
grid-gap: 2rem;
padding: 0 1rem;
}
}
<h1>Column Layout</h1>
<div class="layout">
<div>
<h1>Column 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolor e eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div>
<h1>Column 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolor e eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div>
<h1>Column 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolor e eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
I'm trying to understand how I should use display: grid.
Here is my example:
https://jsfiddle.net/Lycuuu95/
<style>
body {
padding: 2em;
}
.wrapper {
display: grid;
grid-template-columns: 30% 70%;
grid-gap: 10px;
}
.sidebar {
grid-column: 1;
padding: 10px;
background-color: rgb(191,217,155);
}
.content {
grid-column: 2;
padding: 10px;
background-color: rgb(230,230,220);
}
</style>
<h1>Lorem Ipsum</h1>
<div class="wrapper">
<aside class="sidebar"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></aside>
<article class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></article>
</div>
At the first glance, it looks good. However, if you look more thoroughly, you can see some problems. The "content" is outside of "wrapper" and also the distance to the edges of screen is a bit different.
It could be fixed very simply:
/* Before: */
grid-template-columns: 30% 70%;
/* After: */
grid-template-columns: 30% 1fr;
But I am still wondering is it the only proper way or I can somehow use percents, without the problems as shown above? I already tried to use box-sizing: border-box but it does not solve the problem.
Note:
display: grid currently does not work out of the box in stable versions of browsers.
(See http://caniuse.com/#feat=css-grid)
It could be enabled with this quick instruction:
https://igalia.github.io/css-grid-layout/enable.html
Also, in Chrome Canary it works out of the box.
The other way to get your result is to use fr units for both columns, in your case 3fr and 7fr (that will end up with 30% of the free space for the first, and so on)
I have added a shadow to show that now everything is where it should.
body {
padding: 2em;
}
.wrapper {
display: grid;
grid-template-columns: 3fr 7fr; /* fix: 30% 1fr; */
grid-gap: 10px;
box-shadow: 0px 0px 2px 2px red;
}
.sidebar {
grid-column: 1;
padding: 10px;
background-color: rgb(191, 217, 155);
}
.content {
grid-column: 2;
padding: 10px;
background-color: rgb(230, 230, 220);
}
<h1>Lorem Ipsum</h1>
<div class="wrapper">
<aside class="sidebar">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</aside>
<article class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</div>