I am trying to create a grid layout with 2 columns and 3 rows but I'm unsure of how to position the grid items so that they are equal in dimension in their own respected areas (so that they aren't overlapping or taking up more space than needed). I've tried changing the sizes of the columns and rows using fr's and %'s but nothing seems to be working. Any help is greatly appreciated as I am relatively new to css. Below are my html and css files.
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 20% 20% 25%;
grid-template-areas: "health-pic health-text" "fitness-text fitness-pic" "mind-pic mind-text";
grid-gap: 20px;
}
.health-text {
grid-area: health-text;
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
font-size: 1.2rem;
margin-top: 60px;
background-color: white;
height: 65vh;
padding: 2em;
border-radius: .3em;
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.5);
}
.health-text h2 {
margin-bottom: 15px;
}
.health-index {
overflow: hidden;
}
.left-pic {
grid-area: health-pic;
margin-top: 20px;
}
.right-pic {
grid-area: fitness-pic;
}
.fitness-text {
grid-area: fitness-text;
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
font-size: 1.2rem;
margin-top: 60px;
background-color: white;
height: 53vh;
padding: 2em;
border-radius: .3em;
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.5);
}
.fitness-text h2 {
margin-bottom: 15px;
}
.mind-pic {
grid-area: mind-pic;
margin-bottom: 300px;
}
.mind-text {
grid-area: mind-text;
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
font-size: 1.2rem;
margin-bottom: 145px;
margin-top: 60px;
background-color: white;
padding: 2em;
border-radius: .3em;
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.5);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght#1,600;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="/css/style.css">
<title>Fred Ford | Health and Nutrition</title>
</head>
<body>
<!--Navbar-->
<div class="navbar">
<div class="container flex">
<h1 id="logo">Fred Ford</h1>
<nav>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Services</li>
<li>Blog</li>
</ul>
</nav>
</div>
</div>
<section class="landing">
<h2 class="big-text">"Don't limit your challenges. <br> Challenge your limits." - Jerry Dunn</h2>
<div class="landing-pic">
<img src="/img/landing-pic.jpg" alt="Woman stadning on cliff during daytime">
</div>
</section>
<section class="grid">
<div class="health-index">
<img class="left-pic" src="/img/index-health.jpg" alt="Assorted healthy foods">
</div>
<div class="health-text">
<h2>The Importance of Health</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat possimus consectetur error voluptates esse saepe quod quibusdam fuga maiores. Veniam, ea! Quod nesciunt libero, placeat atque suscipit excepturi eius blanditiis soluta sunt tempora
possimus quaerat harum dolorem, id fugiat minima inventore exercitationem dolor dignissimos. Enim laboriosam animi minus facere! Officiis facilis nobis iste itaque ipsam aperiam modi, provident consequatur pariatur laudantium fugit doloribus?
Veritatis deleniti amet nesciunt rem dolor impedit reprehenderit. Eligendi enim quos quibusdam assumenda praesentium dolore, pariatur sint cum consequatur rem non expedita quisquam ab earum cumque magnam sunt laborum necessitatibus magni ducimus
id itaque. Itaque, corrupti molestiae!</p>
</div>
<div class="fitness-index">
<img class="right-pic" src="/img/index-fitness.jpg" alt="man working out outside in white t-shirt">
</div>
<div class="fitness-text">
<h2>The Importance of Fitness</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laudantium ipsam, ad aut, optio eos qui quaerat nobis et eum, natus delectus obcaecati! Culpa, voluptatum maiores? Repudiandae necessitatibus voluptatum facilis officia libero dolorem culpa
illum cupiditate, quis sunt dolores quibusdam nesciunt quaerat quasi! Aliquam ratione quam praesentium animi obcaecati inventore ducimus eius aperiam, beatae maxime illum delectus, blanditiis eligendi quisquam molestiae et eum quia a. Similique
magni eaque sequi quaerat? A ducimus enim delectus ea adipisci.</p>
</div>
<div class="mind">
<img class="mind-pic" src="/img/index-mind.jpg" alt="Man sitting on rock near ocean water">
</div>
<div class="mind-text">
<h2>The Power and Nature of the Mind</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut, quae fuga eligendi, ipsum sequi ex molestiae quisquam iure veritatis iste ipsa nulla deserunt voluptas doloremque exercitationem voluptatibus odio ea repellendus illo natus! In ea consequatur
excepturi minus alias cum assumenda commodi voluptatum necessitatibus vitae possimus ex qui sequi delectus facilis dolores, laboriosam nemo nam facere. Eos, explicabo porro cum nulla laudantium culpa id? Ipsam ut expedita incidunt, laborum vel
nihil iure sapiente libero eius assumenda rem, animi laudantium ullam! Et, alias cupiditate culpa velit rem optio nemo tempora facilis vero sequi minus itaque, temporibus facere?.</p>
</div>
</section>
<!--Footer-->
<section>
<div class="footer">
<ul>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
</ul>
</div>
</section>
</body>
</html>
I think you can change from
grid-template-rows: 20% 20% 25%
to
grid-template-rows: 1fr 1fr 1fr;
Using 1fr for each row and columns mean they are going to have equal size
Previously you had the rows in 20% 20% 25% to translate this to fr in units it means 4fr 4fr 5fr
The fr unit is counted as the ratio of one of the row or column to the total fr
in the case of 4fr 4fr 5fr
The first row have a ratio of 4/13, the row column also have 4/13, while the last one is different which is 5/13
This means the height of each row will be different
When you do 1fr on each row it means the ratio of each row will be 1/3 so it will be equal in size
Hope I helped you there
EDIT:
.health-index {
grid-area: health-pic; /* add this line */
overflow: hidden;
}
.fitness-index {
grid-area: fitness-pic; /* this one as well */
}
You didn't specify which grid area the images belong to so it causes the image to span larger than the provided grid as it is not part of the grid
Related
/* I have a grid inside another grid. The parent grid is set as follows: */
.container {
display: grid;
height: 100vh;
grid-template-columns: 2.409fr 2.409fr 1fr;
grid-template-rows: 1.5fr 5.5fr 5.5fr 1fr;
grid-template-areas:
"header header sidePanel"
"pageContent pageContent sidePanel"
"pageContent pageContent sidePanel"
"footer footer sidePanel";
}
/* the pageContent class contains another 2x2 grid, with three elements: */
.content {
grid-area: pageContent;
background: #d123;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"content-1 content-2"
"content-1 content-3";
}
.header {
grid-area: header;
}
.footer {
grid-area: footer;
}
.sidePanel {
grid-area: sidePanel;
}
.content {
grid-area: pageContent;
}
.content-1 {
grid-area: content-1;
}
.content-2 {
grid-area: content-2;
}
.content-3 {
grid-area: content-3;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">My Header</div>
<div class="sidePanel">My sidePanel</div>
<div class="content">
<div class="content-1">
<span class="title">Main Article</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum rem ratione dolorum ducimus quaerat officiis voluptates obcaecati ab illo sequi, blanditiis vel dolore possimus labore asperiores architecto quia nobis accusantium beatae doloremque
eveniet saepe excepturi laborum exercitationem delectus! Dolor, natus perferendis deleniti sequi veniam. In nemo mollitia dolor ipsam. Ipsa illum delectus eveniet. Explicabo perspiciatis eum distinctio vel quo iure, deleniti tempora dolorem
facilis iste? Reprehenderit maxime neque porro optio, animi praesentium laboriosam recusandae! Ex nesciunt maxime dicta quo hic placeat laboriosam possimus totam, ab velit iure quisquam assumenda odit adipisci, eos voluptatum at qui sint aperiam
blanditiis quos. Quos ratione, molestiae possimus repellendus eveniet et temporibus alias sunt perferendis quod odio, quis tenetur natus obcaecati! Doloremque omnis numquam quia.</p>
</div>
<div class="content-2">
Content 2
</div>
<div class="content-3">
Content 3
</div>
</div>
<div class="footer">My Footer</div>
</div>
</body>
</html>
My greatest difficulty is text placement. If I place a text on content-1 for instance, and resize the page's height, the text overlaps behind the footer, exceeds its grid, and even the container grid. Is there any way to fit the text to its "grid area" and resizing it accordingly?
Your problem is that you are setting a "fixed" height for your rows. When you say:
grid-template-rows: 1.5fr 5.5fr 5.5fr 1fr;
it means that once the available height is established, your grid will have a certain height and won't resize according to the text.
My suggestion would be to simply change this line. You could for example just give your header and footer a fixed height:
grid-template-rows: 100px auto auto 200px;
you simply need to add an overflow rule. I just added .content-1 { overflow-y: auto; } to your code and you will get now a scrollbar if the text is higher then the box-height.
body {
margin: 0;
}
.container {
box-sizing: border-box;
display: grid;
height: 100vh;
grid-template-columns: 2.409fr 2.409fr 1fr;
grid-template-rows: 1.5fr 5.5fr 5.5fr 1fr;
grid-template-areas:
"header header sidePanel"
"pageContent pageContent sidePanel"
"pageContent pageContent sidePanel"
"footer footer sidePanel";
}
.content {
grid-area: pageContent;
background: #d123;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"content-1 content-2"
"content-1 content-3";
}
.header {
grid-area: header;
}
.footer {
grid-area: footer;
}
.sidePanel {
grid-area: sidePanel;
}
.content {
grid-area: pageContent;
}
.content-1 {
grid-area: content-1;
}
.content-2 {
grid-area: content-2;
}
.content-3 {
grid-area: content-3;
}
.content-1,
.content-2,
.content-3 {
overflow-y: auto;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">My Header</div>
<div class="sidePanel">My sidePanel</div>
<div class="content">
<div class="content-1">
<span class="title">Main Article</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum rem ratione dolorum ducimus quaerat officiis voluptates obcaecati ab illo sequi, blanditiis vel dolore possimus labore asperiores architecto quia nobis accusantium beatae doloremque
eveniet saepe excepturi laborum exercitationem delectus! Dolor, natus perferendis deleniti sequi veniam. In nemo mollitia dolor ipsam. Ipsa illum delectus eveniet. Explicabo perspiciatis eum distinctio vel quo iure, deleniti tempora dolorem
facilis iste? Reprehenderit maxime neque porro optio, animi praesentium laboriosam recusandae! Ex nesciunt maxime dicta quo hic placeat laboriosam possimus totam, ab velit iure quisquam assumenda odit adipisci, eos voluptatum at qui sint aperiam
blanditiis quos. Quos ratione, molestiae possimus repellendus eveniet et temporibus alias sunt perferendis quod odio, quis tenetur natus obcaecati! Doloremque omnis numquam quia.</p>
</div>
<div class="content-2">
Content 2
</div>
<div class="content-3">
Content 3
</div>
</div>
<div class="footer">My Footer</div>
</div>
</body>
</html>
I have started learning HTML/css about 2 weeks ago and (among others) this is one of the pages I came up with, but I can't make the image to resize when I shrink down the window. Most of the lessons until now have been about HTML and CSS only and how to make the document easy to read for screen readers and I wanted to do some practice with whatever knowledge I had. Any ideas why the image doesn't shrink down along with the text and why?
Thank you very much!
HTML:
#import url('https://fonts.googleapis.com/css?family=Kelly+Slab&display=swap');
body {
margin: 0;
padding: 0;
background-color: #d89cf6;
}
.top {
position: relative;
padding: 1em 2em 1em 2em;
height: 3em;
background-color: #3e206d;
margin: auto;
overflow: hidden;
border-top: solid 6px;
border-bottom: solid 1px;
}
.top h1 {
position: absolute;
display: flex;
float: left;
margin: 0;
padding: 0;
margin-top: .3em;
font-family: 'Kelly Slab', cursive;
font-size: 2.4em;
color: #f0e3ff;
}
.top ul {
list-style-type: none;
display: flex;
float: right;
margin: 0;
padding: 0;
margin-top: 1.43em;
}
.top li {
padding: 0 0.3em;
margin: auto;
margin-top: .5em;
position: relative;
}
.top a {
text-decoration: none;
color: #f0e3ff;
font-family: 'Kelly Slab', cursive;
font-size: 1.2em;
}
.main {
padding: 1.5em 4.7em 2em;
color: #000000;
font-family: 'Kelly Slab', cursive;
}
.main h2 {
font-size: 1.8rem;
}
.main p {
font-size: 1.3rem;
}
.main img {
min-width: auto;
width: auto;
max-height: 29em;
min-height: 25%;
}
.text_picture {
float:right;
width: auto;
margin: auto;
}
.thank_you {
padding: 1.5em 4.7em 2em;
color: #000000;
font-family: 'Kelly Slab', cursive;
}
footer {
font-size: 1.2rem;
margin: auto;
text-align: center;
padding: 1.5em 4.7em 2em;
color: #000000;
font-family: 'Kelly Slab', cursive;
}
<!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">
<title>Skeleton</title>
<link rel="stylesheet" href="style/main.css" type="text/css">
</head>
<body>
<header>
<div class="top">
<h1>Arghhhh</h1>
<nav class="internal_nav">
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<section class="main">
<article>
<h2>Lorem, ipsum</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolore vero natus libero labore! Voluptas, culpa cum animi, explicabo laudantium fuga rem hic fugiat deleniti eveniet ad dignissimos minus! Nisi cumque dolore illo corrupti quo recusandae possimus aliquam officiis blanditiis, inventore veritatis. Cum itaque molestiae iusto dolorem esse illo saepe ipsam dolor cupiditate neque velit, dolore error earum eveniet tempora!
</p>
<div id="text_picture_container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit ab magni officiis eos rem in aperiam tenetur quidem maiores, tempore enim, id sapiente velit pariatur ducimus. Velit vero consequuntur possimus quam culpa voluptatum officia est voluptate eum, labore facilis assumenda rerum harum ipsam facere quas cupiditate. Itaque facilis voluptas cupiditate eos? Commodi odit tempore nihil blanditiis, excepturi quidem vero. Nam nesciunt corporis minima alias aperiam voluptate neque quidem consequatur ab sed, mollitia nulla labore expedita? Laboriosam atque error, similique temporibus eius, sunt quaerat nobis vero maxime corrupti quis ipsam. Aliquam rem id harum culpa nesciunt facere sit atque provident neque!
</p>
<div class="text_picture">
<figure>
<img src="images/wallpaper-364615676716148alamn2ffq.jpg" alt="lone tree in a field with a orange/magenta sunset in the background">
<br>
<figcaption>A lonely tree in the middle of a field, with a really colorful sunset background.
</figcaption>
</figure>
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt earum assumenda praesentium dolor et veritatis libero. Eveniet quasi fugiat, consectetur error possimus natus? Quasi explicabo deserunt quisquam necessitatibus hic aspernatur totam tenetur eveniet accusamus! Voluptate reprehenderit sunt repellat aut adipisci temporibus provident vitae amet cum doloribus dolorum tempora, perferendis voluptas aperiam libero similique distinctio quam corrupti consequatur vero magnam commodi. Enim, consequuntur. Quod maiores laudantium nesciunt doloremque, voluptatem dolorum amet. Tempore, vel dignissimos, veniam magni recusandae saepe ab labore itaque eum officiis, quaerat quae eveniet? Placeat nemo aperiam similique earum, tempore dicta totam atque. Perspiciatis, aut. Ea distinctio iure minima, id doloremque quisquam quidem expedita nemo. Facere dignissimos, architecto similique repellendus aliquid dicta deserunt et esse voluptate nulla ipsum quod earum voluptas nobis consectetur expedita quas, non itaque. Optio incidunt dolor distinctio, ducimus beatae doloribus magni ut aliquam a facere laborum ipsam ratione voluptatem. Dolore modi error nemo impedit recusandae?
</p>
<div class="first_survey">
<form class="survey">
<fieldset>
<legend>Chose what impressed you the most:</legend>
<label for="style">The styling</label>
<input type="checkbox" id="style" name="survey_choice" value="style">
<label for="writing">The writing</label>
<input type="checkbox" id="writing" name="survey_choice" value="writing">
<label for="pictures">The pictures</label>
<input type="checkbox" id="writing" name="survey_choice" value="pictures">
<div class="button">
<button type="submit">Submit</button>
</div>
</fieldset>
</form>
</section>
<div href="#" class="thank_you">
<h2>Thank you for taking your time to browse my webpage!
</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt quisquam commodi sapiente quos ut unde consectetur alias culpa veniam, quasi perspiciatis expedita esse accusantium quas enim quam soluta, quibusdam sit? Quisquam placeat, iure possimus cupiditate libero non esse quasi facere deserunt debitis delectus reiciendis aliquid magnam a blanditiis, eaque officia.
<p>
</div>
</article>
</body>
<footer>
<h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, dolore?</h6>
</footer>
</html>
You can always use VH unit which stands for viewport width.
Responsive Text
However, I suggest using REM and EM units instead, of course, this depends on your needs.
REM and EM units
Feel free to read this article which explains this topic in depth.
CSS Font Sizing: Pixels vs Em vs Rem vs Percent vs Viewport Units
Now, regarding responsive image sizing, you can simply add a class with these properties and set it to the image you want.
.responsive {
width: 100%;
height: auto;
}
As I said before, read the Medium article, you can use REM, EM, PX, % units on images as well.
How would I make the header full width? And I would like the content class to the right, and the skills class to the right 30% to 70%. If you are able to understand the issue I wasn't able to figure out please tell me what you did to get it to work. Thanks.
I couldn't find any info on how to make the header full width, and move the content to other spots...
* {
box-sizing: border-box;
overflow: hidden;
padding: 10px;
margin: 0px;
}
body {
background-image: url("coder.jpeg");
background-size: cover;
}
.wrapper {
display:grid;
grid-template-columns: 70% 30%;
grid-template-rows: ;
grid-gap: 10px;
}
.header {
background-color: rgba(153, 153, 153, 0.99);
text-align: center;
border-radius: 10px;
font-size: 20px;
}
.skills {
background-color: rgba(153, 153, 153, 0.99);
border-radius: 10px;
}
.content {
background-color: rgba(153, 153, 153, 0.99);
border-radius: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cl32</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<header>
<h1>Cdad</h1>
</header>
</div>
<div class="skills">
<aside>
<h2>Skills</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla fuga asperiores iusto eveniet aliquid nobis aliquam ducimus, tempora consequatur neque earum molestiae unde porro, quis numquam error illum temporibus, incidunt autem. Temporibus maxime esse magnam inventore odit vero in quae sit quo laboriosam? Architecto saepe repudiandae ducimus possimus magni numquam?</p>
</aside>
</div>
<div class="content">
<h2>yuyuyggoggo</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum mollitia sunt at aliquid unde vel sapiente quas sequi repudiandae, quam facere inventore suscipit sed nam quae possimus reprehenderit doloremque. Reprehenderit nisi architecto vel molestiae placeat necessitatibus deleniti laborum facere unde itaque magnam amet ut aspernatur distinctio atque ad perspiciatis nam beatae fugiat illum error veritatis, cupiditate odit? Deserunt earum magni id animi, temporibus sit obcaecati ipsum. Blanditiis, expedita? Fugit dicta ex dignissimos, esse totam voluptas illo maxime minus quae nisi velit nemo sequi nulla et omnis deserunt nam sed ducimus. Minima animi dolor vitae architecto suscipit ipsa eaque autem incidunt.</p>
</div>
</div>
<!--warpper class ends-->
</body>
</html>
Don't know if I understand your question correctly but if you add grid-column: 1 / span 2;to your header class it will give you full width.
I want to align this text ZENZZEX in the first grid. Perfectlly vertical and horizontal, I already aligned it horizontal.
body{
margin: 0;;
}
.navGrid {
display: grid;
grid-template-columns: repeat(6, 1fr);
height: 40px;
position: fixed;
width: 100%;
top:0;
background-color: white;
box-shadow: 0px 5px 10px rgba(0,0,0,0.3);
}
.span-col-4{
grid-column: span 4 / auto;
}
.navGrid .first{
color: black;
text-align: center;
font-family: 'Dosis', sans-serif;
font-size: 1.2em;
font-weight: 800;
position: relative;
top: 20%;
}
.navGrid .first:hover{
cursor: pointer;
font-size: 1.28em;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
</head>
<body>
<div class="navGrid">
<div class="first">ZENZZEX </div>
<div class="span-col-4 second">Item 2</div>
<div class="third">Item 3</div>
</div>
<div class="content"><h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam hic, adipisci quasi eius nesciunt veniam exercitationem dolorem aperiam id vero perferendis voluptatum ab ad laborum quaerat? Minus exercitationem iure assumenda perspiciatis dolorem ullam? Dolorum accusamus, possimus culpa molestias ipsum sequi animi numquam omnis delectus odio magni id. Obcaecati quo, reiciendis id explicabo veritatis qui excepturi distinctio autem voluptate quaerat dolorem?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla iure ullam, ad nisi distinctio cumque molestiae vitae porro ex nihil facere harum delectus in laborum fugiat corporis maiores deserunt reiciendis laboriosam alias rerum. Nisi corrupti nostrum esse perferendis labore animi iure, nam aut laborum tenetur officia veniam consectetur odio, maxime consequatur deleniti illum harum et dicta quibusdam numquam sit commodi id libero. Facilis, incidunt reprehenderit ad beatae omnis obcaecati adipisci impedit, non quo porro deserunt nemo! Sed quo non reprehenderit! Voluptatibus aspernatur, praesentium harum, quod incidunt fugiat quidem adipisci, itaque pariatur minima deserunt porro velit? Laboriosam, minus! Sit, neque quibusdam.</h1></div>
</body>
</html>
You can do this using flexbox:
.navGrid .first {
color: black;
text-align: center;
font-family: 'Dosis', sans-serif;
font-size: 1.2em;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}
This question already has answers here:
Margin on child element moves parent element
(18 answers)
Closed 6 years ago.
Well, now I've this problem, I want to adjust just the margin on the "c2" but when I set it to X, it changes the "c1" div margin :S
Here's the code I'm using:
<header>
<div class="jumbotron">
<center><h1>Bienvenidos a JVasconcelos.me</h1></center>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-12 col-centered">
<div class="c1">
<div class="c2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis inventore illum quaerat laboriosam eos, vel sed suscipit cumque laborum est animi aliquid tempora iusto beatae quam quisquam porro dolore! Ullam tenetur doloribus ducimus, totam voluptatum, deleniti vero voluptatem eius architecto velit neque voluptas aliquam quidem sed eveniet! Nobis ex eos iste dolorum tempora doloremque non deleniti, aperiam quibusdam corrupti officia consequatur, impedit. Exercitationem debitis iste voluptatum, illo nulla iure culpa ex fugit, aliquid dolorem excepturi, impedit voluptates quae quidem error earum natus, provident eum vitae. Tempore ducimus laborum voluptates, qui aspernatur odit dolorum modi quas cupiditate unde quam earum amet!
</p>
</div>
</div>
</div>
</div>
</div>
CSS
div.c1 { height: 100vh; background: #417ba1; margin-top: -30px; padding: 0px 30px; }
div.c2 { height: 90%; background: #fff; margin-top: 0px; padding: 60px 30px; }
.jumbotron { background: url("../img/header_bg.png") no-repeat; height: 100%; }
Ah. You're looking for
.c1 {
overflow: auto; // or hidden or overlay
}
This behavior is due to the collapsing margins part of the box model spec. Putting overflow: auto|hidden|overlay on the parent will establish a new block formatting context and stop the margins from collapsing.
This is because the border of the c1 and c2 are collapsing. You have to hide the overflow (with overflow: hidden or any overflow different that default, which is visible) of the container to avoid that the c1 also get the margin of c2.
div.c1 { height: 100vh; background: #417ba1; overflow: hidden; margin-top: -30px; padding: 0px 30px; }
div.c2 { height: 90%; background: #fff; margin-top: 20px; padding: 60px 30px; }
.jumbotron { background: url("../img/header_bg.png") no-repeat; height: 100%; }
<header>
<div class="jumbotron">
<center><h1>Bienvenidos a JVasconcelos.me</h1></center>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-12 col-centered">
<div class="c1">
<div class="c2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis inventore illum quaerat laboriosam eos, vel sed suscipit cumque laborum est animi aliquid tempora iusto beatae quam quisquam porro dolore! Ullam tenetur doloribus ducimus, totam voluptatum, deleniti vero voluptatem eius architecto velit neque voluptas aliquam quidem sed eveniet! Nobis ex eos iste dolorum tempora doloremque non deleniti, aperiam quibusdam corrupti officia consequatur, impedit. Exercitationem debitis iste voluptatum, illo nulla iure culpa ex fugit, aliquid dolorem excepturi, impedit voluptates quae quidem error earum natus, provident eum vitae. Tempore ducimus laborum voluptates, qui aspernatur odit dolorum modi quas cupiditate unde quam earum amet!
</p>
</div>
</div>
</div>
</div>
</div>
I assume you mean when you change the margin-top on the div.c2 your div.c1 also shifts down. This is due to the default definition of a div+div construct.
To achieve what you want you will need to create the following extra css definition on your div.c1:
display: inline-block;
Have a look at this codepen: http://codepen.io/anon/pen/beNjbW
Difference of or greater margin of c1 or c2 will be rendered due to collapsible margins.
In this case your total distance will be 0 (they cancel each other):
div.c1 {
margin-top: -30px;
}
div.c2 {
margin-top: 30px;
}
In this case your distance will be 10px from the top:
div.c1 {
margin-top: -30px;
}
div.c2 {
margin-top: 40px;
}
One of top margins can be omitted in this case. You can control the distance to header by adjusting margin-top of either one
codePen example