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>
Related
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>
Can someone please tell me how to make text in the boxes can be pushed down to stop overlapping and text shouldn't go out of the box? Also, I need some margin in the column boxes.
There are media queries and ignore that one. I just want to know how to change the CSS so that text is not overflowing from the box and I don't want to use the overflow property also. Also how to give the margin to the column boxes provided boxes remain in the line.
Code CSS and HTML -->
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Impact, Charcoal, sans-serif;
}
div.row div {
background-color: gray;
border: 1px black solid;
position: relative;
}
.heading{
margin: 30px;
margin-bottom: 70px;
text-align:center;
}
/*For large devices*/
#media (min-width: 992px){
.col-lg-3{
float : left;
width: 33.33%;
}
}
/*For medium devices*/
#media (min-width: 768px) and (max-width: 991px){
.col-md-2{
float:left;
width: 50%;
}
.col-md-12{
float: left;
width: 100%;
}
}
/*For small devices*/
#media (max-width: 767px){
.col-sm-12{
float:left;
width: 100%;
}
}
h2.item1 {
position: absolute;
background-color: orange;
top: 0;
right: 0;
padding: 2%;
}
h2.item2 {
position: absolute;
background-color: green;
top: 0;
right: 0;
padding: 2%;
}
h2.item3 {
position: absolute;
background-color: skyblue;
top: 0;
right: 0;
padding: 2%;
}
section {
padding: 2%;
}
<!DOCTYPE html>
<html>
<head>
<title>Our Menu</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="heading">Our Menu</h1>
<div class="row">
<div class="col-sm-12 col-md-2 col-lg-3">
<h2 class="item1">Chicken</h2>
<section class="desc1">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 zfiofficia deserunt mollit anim id est laborum.</section>
</div>
<div class="col-sm-12 col-md-2 col-lg-3">
<h2 class="item2">Beef</h2>
<section class="desc2">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.</section>
</div>
<div class="col-sm-12 col-md-12 col-lg-3">
<h2 class="item3">Sushi</h2>
<section class="desc3">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.</section>
</div>
</div>
</body>
</html>
By setting the position to absolute you are removing the html from the normal 'flow' of the document, so you can't apply normal css properties such as margin.
To circumvent this, you should float the h2's right instead and then apply a margin to prevent your text being hiddent under the element.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Impact, Charcoal, sans-serif;
}
div.row div {
background-color: gray;
border: 1px black solid;
position: relative;
}
.heading{
margin: 30px;
margin-bottom: 70px;
text-align:center;
}
/*For large devices*/
#media (min-width: 992px){
.col-lg-3{
float : left;
width: 33.33%;
}
}
/*For medium devices*/
#media (min-width: 768px) and (max-width: 991px){
.col-md-2{
float:left;
width: 50%;
}
.col-md-12{
float: left;
width: 100%;
}
}
/*For small devices*/
#media (max-width: 767px){
.col-sm-12{
float:left;
width: 100%;
}
}
h2.item1, h2.item2, h2.item3 {
background-color: orange;
padding: 2%;
display: inline-block;
float: right;
margin: .3rem;
}
h2.item2 {
background-color: green;
}
h2.item3 {
background-color: skyblue;
}
section {
padding: 2%;
}
.desc1, .desc2, .desc3{
padding: 1rem;
margin: 0.5rem;
}
<!DOCTYPE html>
<html>
<head>
<title>Our Menu</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="heading">Our Menu</h1>
<div class="row">
<div class="col-sm-12 col-md-2 col-lg-3">
<h2 class="item1">Chicken</h2>
<section class="desc1">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 zfiofficia deserunt mollit anim id est laborum.</section>
</div>
<div class="col-sm-12 col-md-2 col-lg-3">
<h2 class="item2">Beef</h2>
<section class="desc2">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.</section>
</div>
<div class="col-sm-12 col-md-12 col-lg-3">
<h2 class="item3">Sushi</h2>
<section class="desc3">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.</section>
</div>
</div>
</body>
</html>
I want these below contents to have 50% width equally on PC's and 100% in mobile devices.
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.box-left {
width: 100%
}
.box-right {
width: 100%
}
</style>
<div class="container">
<div class="box-left">
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.
</div>
<img class="box-right" src="https://i.imgur.com/gawfygm.png" />
</div>
Expand or Shrink the view to check if its working.
.container {
display: flex;
flex-direction: column;
}
.box-left {
width: 100%;
font-size: 1rem;
font-family: 'Work Sans', sans-serif;
line-height: 1.5;
padding: 1rem;
}
.box-right {
margin: 0 auto;
width: 100%;
height: auto;
}
#media(min-width:576px) {
.container {
flex-direction: row;
}
.box-left {
width: 50%;
background: lightblue;
}
.box-right {
width: 50%;
background: lightcoral;
}
}
<div class="container">
<div class="box-left">
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.
</div>
<img class="box-right" src="https://i.imgur.com/gawfygm.png" />
</div>
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