Header text overlapping on wrap
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
2
Trying to make my first grid website, and everything is going well, but for some reason the Header text is crowded in a smaller browser.
I've tried playing with padding/margins of different elements. tried adding line heights, deleting flex properties, nothing has worked.
I want my showcase h1 to have proper line spacing.
body {
background: var(--primary);
margin: 30px 50px;
line-height: 1.6rem;
}
img {
max-width: 100%;
}
.wrapper {
display: grid;
grid-gap: 1.2rem;
}
.main-nav ul {
display: grid;
grid-gap: 1.3rem;
grid-template-columns: repeat(4, 1fr);
padding: 0;
list-style: none;
}
.main-nav a {
background: var(--dark);
display: block;
text-decoration: none;
padding: 0.8rem;
color: var(--primary);
text-transform: uppercase;
font-size: 1.1rem;
box-shadow: var(--shadow);
text-align: center;
}
.btn {
color: var(--primary);
background: var(--dark);
padding: 0.6rem 1.3rem;
text-decoration: none;
border: 0;
box-shadow: var(--shadow);
}
.main-nav a:hover {
background: var(--primary);
color: var(--dark);
}
.top-container {
display: grid;
grid-gap: 1.2rem;
grid-template-areas: 'showcase showcase top-box-a' 'showcase showcase top-box-b';
}
.showcase {
grid-area: showcase;
min-height: 400px;
background: url("https://source.unsplash.com/random");
background-size: cover;
background-position: center;
padding: 3rem;
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
color: black;
box-shadow: var(--shadow);
}
.showcase h1 {
font-size: 4rem;
margin-bottom: 0.5rem;
}
.showcase p {
font-size: 1.3rem;
margin-top: 0;
}
.top-box {
background: #545454;
color: var(--primary);
padding: 1.5rem;
text-align: center;
align-items: center;
box-shadow: var(--shadow);
justify-items: center;
}
.top-box .price {
font-size: 1.4rem;
}
.top-box-a {
grid-area: top-box-a;
}
.top-box-b {
grid-area: top-box-b;
}
.boxes {
display: grid;
grid-gap: 1.3rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.box {
background: var(--dark);
color: var(--primary);
text-align: center;
padding: 1.5rem 2rem;
box-shadow: var(--shadow);
}<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<!-- Wrapper Begins-->
<div class="wrapper">
<nav class="main-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</nav>
<section class="top-container">
<header class="showcase">
<h1>Victors Tree Service</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua!
</p>
<a href="#" class="btn">Read More</a>
</header>
<div class="top-box top-box-a">
<h2>Routine Services</h2>
<p class="price">Starting at $199</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.
</p>
</div>
<div class="top-box top-box-b">
<h2>Tree Removal</h2>
<p class="price">From $299 - $799</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.
</p>
</div>
</section>
<section class="boxes">
<div class="box">
<i class="fas fa-tree fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-tools fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-users fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-clock fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</section>
<section class="info">
<img src="https://source.unsplash.com/random">
<div>
<h2>Over 20 Years Experience</h2>
<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>
</section>
<section class="portfolio">
<img src="https://source.unsplash.com/random/200x200">
<img src="https://source.unsplash.com/random/200x201">
<img src="https://source.unsplash.com/random/200x202">
<img src="https://source.unsplash.com/random/200x203">
<img src="https://source.unsplash.com/random/200x204">
<img src="https://source.unsplash.com/random/200x205">
<img src="https://source.unsplash.com/random/200x206">
<img src="https://source.unsplash.com/random/200x207">
<img src="https://source.unsplash.com/random/200x208">
</section>
<footer>Victor's Tree Service © 2019</footer>
</div>
<!--Wrapper Ends -->html css html5 flexbox css-grid
edited Jan 4 at 2:09
Michael_B
158k50255363
asked Jan 3 at 21:02
Adag89Adag89
708
add a comment |
2
Trying to make my first grid website, and everything is going well, but for some reason the Header text is crowded in a smaller browser.
I've tried playing with padding/margins of different elements. tried adding line heights, deleting flex properties, nothing has worked.
I want my showcase h1 to have proper line spacing.
body {
background: var(--primary);
margin: 30px 50px;
line-height: 1.6rem;
}
img {
max-width: 100%;
}
.wrapper {
display: grid;
grid-gap: 1.2rem;
}
.main-nav ul {
display: grid;
grid-gap: 1.3rem;
grid-template-columns: repeat(4, 1fr);
padding: 0;
list-style: none;
}
.main-nav a {
background: var(--dark);
display: block;
text-decoration: none;
padding: 0.8rem;
color: var(--primary);
text-transform: uppercase;
font-size: 1.1rem;
box-shadow: var(--shadow);
text-align: center;
}
.btn {
color: var(--primary);
background: var(--dark);
padding: 0.6rem 1.3rem;
text-decoration: none;
border: 0;
box-shadow: var(--shadow);
}
.main-nav a:hover {
background: var(--primary);
color: var(--dark);
}
.top-container {
display: grid;
grid-gap: 1.2rem;
grid-template-areas: 'showcase showcase top-box-a' 'showcase showcase top-box-b';
}
.showcase {
grid-area: showcase;
min-height: 400px;
background: url("https://source.unsplash.com/random");
background-size: cover;
background-position: center;
padding: 3rem;
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
color: black;
box-shadow: var(--shadow);
}
.showcase h1 {
font-size: 4rem;
margin-bottom: 0.5rem;
}
.showcase p {
font-size: 1.3rem;
margin-top: 0;
}
.top-box {
background: #545454;
color: var(--primary);
padding: 1.5rem;
text-align: center;
align-items: center;
box-shadow: var(--shadow);
justify-items: center;
}
.top-box .price {
font-size: 1.4rem;
}
.top-box-a {
grid-area: top-box-a;
}
.top-box-b {
grid-area: top-box-b;
}
.boxes {
display: grid;
grid-gap: 1.3rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.box {
background: var(--dark);
color: var(--primary);
text-align: center;
padding: 1.5rem 2rem;
box-shadow: var(--shadow);
}<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<!-- Wrapper Begins-->
<div class="wrapper">
<nav class="main-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</nav>
<section class="top-container">
<header class="showcase">
<h1>Victors Tree Service</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua!
</p>
<a href="#" class="btn">Read More</a>
</header>
<div class="top-box top-box-a">
<h2>Routine Services</h2>
<p class="price">Starting at $199</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.
</p>
</div>
<div class="top-box top-box-b">
<h2>Tree Removal</h2>
<p class="price">From $299 - $799</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.
</p>
</div>
</section>
<section class="boxes">
<div class="box">
<i class="fas fa-tree fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-tools fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-users fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-clock fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</section>
<section class="info">
<img src="https://source.unsplash.com/random">
<div>
<h2>Over 20 Years Experience</h2>
<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>
</section>
<section class="portfolio">
<img src="https://source.unsplash.com/random/200x200">
<img src="https://source.unsplash.com/random/200x201">
<img src="https://source.unsplash.com/random/200x202">
<img src="https://source.unsplash.com/random/200x203">
<img src="https://source.unsplash.com/random/200x204">
<img src="https://source.unsplash.com/random/200x205">
<img src="https://source.unsplash.com/random/200x206">
<img src="https://source.unsplash.com/random/200x207">
<img src="https://source.unsplash.com/random/200x208">
</section>
<footer>Victor's Tree Service © 2019</footer>
</div>
<!--Wrapper Ends -->html css html5 flexbox css-grid
edited Jan 4 at 2:09
Michael_B
158k50255363
asked Jan 3 at 21:02
Adag89Adag89
708
add a comment |
2
2
2
Trying to make my first grid website, and everything is going well, but for some reason the Header text is crowded in a smaller browser.
I've tried playing with padding/margins of different elements. tried adding line heights, deleting flex properties, nothing has worked.
I want my showcase h1 to have proper line spacing.
body {
background: var(--primary);
margin: 30px 50px;
line-height: 1.6rem;
}
img {
max-width: 100%;
}
.wrapper {
display: grid;
grid-gap: 1.2rem;
}
.main-nav ul {
display: grid;
grid-gap: 1.3rem;
grid-template-columns: repeat(4, 1fr);
padding: 0;
list-style: none;
}
.main-nav a {
background: var(--dark);
display: block;
text-decoration: none;
padding: 0.8rem;
color: var(--primary);
text-transform: uppercase;
font-size: 1.1rem;
box-shadow: var(--shadow);
text-align: center;
}
.btn {
color: var(--primary);
background: var(--dark);
padding: 0.6rem 1.3rem;
text-decoration: none;
border: 0;
box-shadow: var(--shadow);
}
.main-nav a:hover {
background: var(--primary);
color: var(--dark);
}
.top-container {
display: grid;
grid-gap: 1.2rem;
grid-template-areas: 'showcase showcase top-box-a' 'showcase showcase top-box-b';
}
.showcase {
grid-area: showcase;
min-height: 400px;
background: url("https://source.unsplash.com/random");
background-size: cover;
background-position: center;
padding: 3rem;
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
color: black;
box-shadow: var(--shadow);
}
.showcase h1 {
font-size: 4rem;
margin-bottom: 0.5rem;
}
.showcase p {
font-size: 1.3rem;
margin-top: 0;
}
.top-box {
background: #545454;
color: var(--primary);
padding: 1.5rem;
text-align: center;
align-items: center;
box-shadow: var(--shadow);
justify-items: center;
}
.top-box .price {
font-size: 1.4rem;
}
.top-box-a {
grid-area: top-box-a;
}
.top-box-b {
grid-area: top-box-b;
}
.boxes {
display: grid;
grid-gap: 1.3rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.box {
background: var(--dark);
color: var(--primary);
text-align: center;
padding: 1.5rem 2rem;
box-shadow: var(--shadow);
}<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<!-- Wrapper Begins-->
<div class="wrapper">
<nav class="main-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</nav>
<section class="top-container">
<header class="showcase">
<h1>Victors Tree Service</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua!
</p>
<a href="#" class="btn">Read More</a>
</header>
<div class="top-box top-box-a">
<h2>Routine Services</h2>
<p class="price">Starting at $199</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.
</p>
</div>
<div class="top-box top-box-b">
<h2>Tree Removal</h2>
<p class="price">From $299 - $799</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.
</p>
</div>
</section>
<section class="boxes">
<div class="box">
<i class="fas fa-tree fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-tools fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-users fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-clock fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</section>
<section class="info">
<img src="https://source.unsplash.com/random">
<div>
<h2>Over 20 Years Experience</h2>
<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>
</section>
<section class="portfolio">
<img src="https://source.unsplash.com/random/200x200">
<img src="https://source.unsplash.com/random/200x201">
<img src="https://source.unsplash.com/random/200x202">
<img src="https://source.unsplash.com/random/200x203">
<img src="https://source.unsplash.com/random/200x204">
<img src="https://source.unsplash.com/random/200x205">
<img src="https://source.unsplash.com/random/200x206">
<img src="https://source.unsplash.com/random/200x207">
<img src="https://source.unsplash.com/random/200x208">
</section>
<footer>Victor's Tree Service © 2019</footer>
</div>
<!--Wrapper Ends -->html css html5 flexbox css-grid
edited Jan 4 at 2:09
Michael_B
158k50255363
asked Jan 3 at 21:02
Adag89Adag89
708
Trying to make my first grid website, and everything is going well, but for some reason the Header text is crowded in a smaller browser.
I've tried playing with padding/margins of different elements. tried adding line heights, deleting flex properties, nothing has worked.
I want my showcase h1 to have proper line spacing.
body {
background: var(--primary);
margin: 30px 50px;
line-height: 1.6rem;
}
img {
max-width: 100%;
}
.wrapper {
display: grid;
grid-gap: 1.2rem;
}
.main-nav ul {
display: grid;
grid-gap: 1.3rem;
grid-template-columns: repeat(4, 1fr);
padding: 0;
list-style: none;
}
.main-nav a {
background: var(--dark);
display: block;
text-decoration: none;
padding: 0.8rem;
color: var(--primary);
text-transform: uppercase;
font-size: 1.1rem;
box-shadow: var(--shadow);
text-align: center;
}
.btn {
color: var(--primary);
background: var(--dark);
padding: 0.6rem 1.3rem;
text-decoration: none;
border: 0;
box-shadow: var(--shadow);
}
.main-nav a:hover {
background: var(--primary);
color: var(--dark);
}
.top-container {
display: grid;
grid-gap: 1.2rem;
grid-template-areas: 'showcase showcase top-box-a' 'showcase showcase top-box-b';
}
.showcase {
grid-area: showcase;
min-height: 400px;
background: url("https://source.unsplash.com/random");
background-size: cover;
background-position: center;
padding: 3rem;
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
color: black;
box-shadow: var(--shadow);
}
.showcase h1 {
font-size: 4rem;
margin-bottom: 0.5rem;
}
.showcase p {
font-size: 1.3rem;
margin-top: 0;
}
.top-box {
background: #545454;
color: var(--primary);
padding: 1.5rem;
text-align: center;
align-items: center;
box-shadow: var(--shadow);
justify-items: center;
}
.top-box .price {
font-size: 1.4rem;
}
.top-box-a {
grid-area: top-box-a;
}
.top-box-b {
grid-area: top-box-b;
}
.boxes {
display: grid;
grid-gap: 1.3rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.box {
background: var(--dark);
color: var(--primary);
text-align: center;
padding: 1.5rem 2rem;
box-shadow: var(--shadow);
}<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<!-- Wrapper Begins-->
<div class="wrapper">
<nav class="main-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</nav>
<section class="top-container">
<header class="showcase">
<h1>Victors Tree Service</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua!
</p>
<a href="#" class="btn">Read More</a>
</header>
<div class="top-box top-box-a">
<h2>Routine Services</h2>
<p class="price">Starting at $199</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.
</p>
</div>
<div class="top-box top-box-b">
<h2>Tree Removal</h2>
<p class="price">From $299 - $799</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.
</p>
</div>
</section>
<section class="boxes">
<div class="box">
<i class="fas fa-tree fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-tools fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-users fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-clock fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</section>
<section class="info">
<img src="https://source.unsplash.com/random">
<div>
<h2>Over 20 Years Experience</h2>
<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>
</section>
<section class="portfolio">
<img src="https://source.unsplash.com/random/200x200">
<img src="https://source.unsplash.com/random/200x201">
<img src="https://source.unsplash.com/random/200x202">
<img src="https://source.unsplash.com/random/200x203">
<img src="https://source.unsplash.com/random/200x204">
<img src="https://source.unsplash.com/random/200x205">
<img src="https://source.unsplash.com/random/200x206">
<img src="https://source.unsplash.com/random/200x207">
<img src="https://source.unsplash.com/random/200x208">
</section>
<footer>Victor's Tree Service © 2019</footer>
</div>
<!--Wrapper Ends -->body {
background: var(--primary);
margin: 30px 50px;
line-height: 1.6rem;
}
img {
max-width: 100%;
}
.wrapper {
display: grid;
grid-gap: 1.2rem;
}
.main-nav ul {
display: grid;
grid-gap: 1.3rem;
grid-template-columns: repeat(4, 1fr);
padding: 0;
list-style: none;
}
.main-nav a {
background: var(--dark);
display: block;
text-decoration: none;
padding: 0.8rem;
color: var(--primary);
text-transform: uppercase;
font-size: 1.1rem;
box-shadow: var(--shadow);
text-align: center;
}
.btn {
color: var(--primary);
background: var(--dark);
padding: 0.6rem 1.3rem;
text-decoration: none;
border: 0;
box-shadow: var(--shadow);
}
.main-nav a:hover {
background: var(--primary);
color: var(--dark);
}
.top-container {
display: grid;
grid-gap: 1.2rem;
grid-template-areas: 'showcase showcase top-box-a' 'showcase showcase top-box-b';
}
.showcase {
grid-area: showcase;
min-height: 400px;
background: url("https://source.unsplash.com/random");
background-size: cover;
background-position: center;
padding: 3rem;
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
color: black;
box-shadow: var(--shadow);
}
.showcase h1 {
font-size: 4rem;
margin-bottom: 0.5rem;
}
.showcase p {
font-size: 1.3rem;
margin-top: 0;
}
.top-box {
background: #545454;
color: var(--primary);
padding: 1.5rem;
text-align: center;
align-items: center;
box-shadow: var(--shadow);
justify-items: center;
}
.top-box .price {
font-size: 1.4rem;
}
.top-box-a {
grid-area: top-box-a;
}
.top-box-b {
grid-area: top-box-b;
}
.boxes {
display: grid;
grid-gap: 1.3rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.box {
background: var(--dark);
color: var(--primary);
text-align: center;
padding: 1.5rem 2rem;
box-shadow: var(--shadow);
}<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<!-- Wrapper Begins-->
<div class="wrapper">
<nav class="main-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</nav>
<section class="top-container">
<header class="showcase">
<h1>Victors Tree Service</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua!
</p>
<a href="#" class="btn">Read More</a>
</header>
<div class="top-box top-box-a">
<h2>Routine Services</h2>
<p class="price">Starting at $199</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.
</p>
</div>
<div class="top-box top-box-b">
<h2>Tree Removal</h2>
<p class="price">From $299 - $799</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.
</p>
</div>
</section>
<section class="boxes">
<div class="box">
<i class="fas fa-tree fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-tools fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-users fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-clock fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</section>
<section class="info">
<img src="https://source.unsplash.com/random">
<div>
<h2>Over 20 Years Experience</h2>
<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>
</section>
<section class="portfolio">
<img src="https://source.unsplash.com/random/200x200">
<img src="https://source.unsplash.com/random/200x201">
<img src="https://source.unsplash.com/random/200x202">
<img src="https://source.unsplash.com/random/200x203">
<img src="https://source.unsplash.com/random/200x204">
<img src="https://source.unsplash.com/random/200x205">
<img src="https://source.unsplash.com/random/200x206">
<img src="https://source.unsplash.com/random/200x207">
<img src="https://source.unsplash.com/random/200x208">
</section>
<footer>Victor's Tree Service © 2019</footer>
</div>
<!--Wrapper Ends -->body {
background: var(--primary);
margin: 30px 50px;
line-height: 1.6rem;
}
img {
max-width: 100%;
}
.wrapper {
display: grid;
grid-gap: 1.2rem;
}
.main-nav ul {
display: grid;
grid-gap: 1.3rem;
grid-template-columns: repeat(4, 1fr);
padding: 0;
list-style: none;
}
.main-nav a {
background: var(--dark);
display: block;
text-decoration: none;
padding: 0.8rem;
color: var(--primary);
text-transform: uppercase;
font-size: 1.1rem;
box-shadow: var(--shadow);
text-align: center;
}
.btn {
color: var(--primary);
background: var(--dark);
padding: 0.6rem 1.3rem;
text-decoration: none;
border: 0;
box-shadow: var(--shadow);
}
.main-nav a:hover {
background: var(--primary);
color: var(--dark);
}
.top-container {
display: grid;
grid-gap: 1.2rem;
grid-template-areas: 'showcase showcase top-box-a' 'showcase showcase top-box-b';
}
.showcase {
grid-area: showcase;
min-height: 400px;
background: url("https://source.unsplash.com/random");
background-size: cover;
background-position: center;
padding: 3rem;
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
color: black;
box-shadow: var(--shadow);
}
.showcase h1 {
font-size: 4rem;
margin-bottom: 0.5rem;
}
.showcase p {
font-size: 1.3rem;
margin-top: 0;
}
.top-box {
background: #545454;
color: var(--primary);
padding: 1.5rem;
text-align: center;
align-items: center;
box-shadow: var(--shadow);
justify-items: center;
}
.top-box .price {
font-size: 1.4rem;
}
.top-box-a {
grid-area: top-box-a;
}
.top-box-b {
grid-area: top-box-b;
}
.boxes {
display: grid;
grid-gap: 1.3rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.box {
background: var(--dark);
color: var(--primary);
text-align: center;
padding: 1.5rem 2rem;
box-shadow: var(--shadow);
}<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<!-- Wrapper Begins-->
<div class="wrapper">
<nav class="main-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</nav>
<section class="top-container">
<header class="showcase">
<h1>Victors Tree Service</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua!
</p>
<a href="#" class="btn">Read More</a>
</header>
<div class="top-box top-box-a">
<h2>Routine Services</h2>
<p class="price">Starting at $199</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.
</p>
</div>
<div class="top-box top-box-b">
<h2>Tree Removal</h2>
<p class="price">From $299 - $799</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.
</p>
</div>
</section>
<section class="boxes">
<div class="box">
<i class="fas fa-tree fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-tools fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-users fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-clock fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</section>
<section class="info">
<img src="https://source.unsplash.com/random">
<div>
<h2>Over 20 Years Experience</h2>
<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>
</section>
<section class="portfolio">
<img src="https://source.unsplash.com/random/200x200">
<img src="https://source.unsplash.com/random/200x201">
<img src="https://source.unsplash.com/random/200x202">
<img src="https://source.unsplash.com/random/200x203">
<img src="https://source.unsplash.com/random/200x204">
<img src="https://source.unsplash.com/random/200x205">
<img src="https://source.unsplash.com/random/200x206">
<img src="https://source.unsplash.com/random/200x207">
<img src="https://source.unsplash.com/random/200x208">
</section>
<footer>Victor's Tree Service © 2019</footer>
</div>
<!--Wrapper Ends -->html css html5 flexbox css-grid
html css html5 flexbox css-grid
edited Jan 4 at 2:09
Michael_B
158k50255363
asked Jan 3 at 21:02
Adag89Adag89
708
edited Jan 4 at 2:09
Michael_B
158k50255363
asked Jan 3 at 21:02
Adag89Adag89
708
edited Jan 4 at 2:09
Michael_B
158k50255363
edited Jan 4 at 2:09
Michael_B
158k50255363
edited Jan 4 at 2:09
Michael_B
158k50255363
158k50255363
asked Jan 3 at 21:02
Adag89Adag89
708
asked Jan 3 at 21:02
Adag89Adag89
708
asked Jan 3 at 21:02
Adag89Adag89
708
708
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
4
This is not a grid or flex or padding / margin issue. It's a line-height issue.
In particular, the problem is line-height: 1.6rem set on the body element.
The line-height property sets the minimum height of line boxes, where inline elements, such as text, exist.
A typical default value in most browsers is 1.2 (MDN) – notice the unitless value; more on that later.
In addition, the line-height property is inheritable (MDN), which means that elements down the HTML structure take the value you've set higher up.
Since you haven't defined a line-height value anywhere below the body element, that setting applies throughout your document.
So here's the problem:
You've set your h1 to 4rem.
But a 1.6rem line height cannot accommodate that size.
(4 * 16px) > (1.6 * 16px)
Here's your layout in normal desktop mode:
Notice how the heading is already exceeding the boundaries of the line box.
Because of this short line height, the text overlaps on wrap (as on smaller screens):
The solution, believe it or not, is simply to remove the unit of length from the line-height value.
So instead of line-height: 1.6rem, use line-height: 1.6.
You may even want to consider using the 1.2 default value (in which case, you can omit the line-height rule altogether).
The reason this works is as follows:
When you use line-height: 1.6rem, the line box height is calculated based on the root element's font size. In your case, that happens to be 16px (the browser's default value).
line box height: 1.6 * 16px = 25.6px
h1 font size: 4.0 * 16px = 64.0px
That's how the h1 exceeds the height of the line box.
But with line-height: 1.6, the line box height is calculated based on the size of the font itself.
line box height: 1.6 * (4 * 16px) = 102.4px
h1 font size: 4.0 * 16px = 64.0px
That's how the line box exceeds the height of the h1.
It's also why it makes sense to use unitless values in the line-height property.
See the spec for references and more details:
- 10.8 Line height calculations: the
line-heightandvertical-alignproperties
answered Jan 4 at 1:50
Michael_BMichael_B
158k50255363
1
Perfect thank you, I ended up figuring this out, but your explanation is incredibly helpful in understanding why.
– Adag89
Jan 4 at 1:59
1
To be more accurate, the line-height applied to the container (body here) define the minimum height of line-box and the line-height applied to text element define the height. But as you said and due to inheritance both can be merged to only one but if we only change the line-height of the elements and we keep the one of the body it will also work (stackoverflow.com/a/54342051/8620333)
– Temani Afif
Feb 18 at 13:38
Thanks for the additional clarification @TemaniAfif
– Michael_B
Feb 18 at 14:01
add a comment |
0
Use media query for responsiveness and it should be written at the end of the css so that css properties written under media query will not get override with any other css properties.
@media screen and (max-width: 600px) {
.main-nav a {
text-align: center;
float: none;
}
}
Instead of display:grid, use display:block so that it will take entire space and use float:left so that all the elements will be positioned to the left of the container.
body {
background: var(--primary);
margin: 30px 50px;
line-height: 1.6rem;
}
img {
max-width: 100%;
}
.wrapper {
display: grid;
grid-gap: 1.2rem;
}
.main-nav ul {
display: block;
padding: 0;
list-style: none;
}
.main-nav a {
background: var(--dark);
display: block;
text-decoration: none;
margin: 0.8rem;
/*use margin instead of padding so that it will be clickable only on the element*/
color: var(--primary);
text-transform: uppercase;
font-size: 1.1rem;
box-shadow: var(--shadow);
text-align: center;
float: left;
border: 1px solid red;
/*just to highlight the clickable el*/
}
.btn {
color: var(--primary);
background: var(--dark);
padding: 0.6rem 1.3rem;
text-decoration: none;
border: 0;
box-shadow: var(--shadow);
}
.main-nav a:hover {
background: var(--primary);
color: var(--dark);
}
.top-container {
display: grid;
grid-gap: 1.2rem;
grid-template-areas: 'showcase showcase top-box-a' 'showcase showcase top-box-b';
}
.showcase {
grid-area: showcase;
min-height: 400px;
background: url("https://source.unsplash.com/random");
background-size: cover;
background-position: center;
padding: 3rem;
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
color: black;
box-shadow: var(--shadow);
}
.showcase h1 {
font-size: 4rem;
margin-bottom: 0.5rem;
}
.showcase p {
font-size: 1.3rem;
margin-top: 0;
}
.top-box {
background: #545454;
color: var(--primary);
padding: 1.5rem;
text-align: center;
align-items: center;
box-shadow: var(--shadow);
justify-items: center;
}
.top-box .price {
font-size: 1.4rem;
}
.top-box-a {
grid-area: top-box-a;
}
.top-box-b {
grid-area: top-box-b;
}
.boxes {
display: grid;
grid-gap: 1.3rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.box {
background: var(--dark);
color: var(--primary);
text-align: center;
padding: 1.5rem 2rem;
box-shadow: var(--shadow);
}
@media screen and (max-width: 600px) {
.main-nav a {
text-align: center;
float: none;
}
}<!DOCTYPE html>
<html>
<head>
<title>Victors Tree Service</title>
<link rel="stylesheet" type="text/css" href="C:UsersgeekDesktopExperimentalstyles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-
UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<!-- Wrapper Begins-->
<div class="wrapper">
<nav class="main-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</nav>
<section class="top-container">
<header class="showcase">
<h1>Victors Tree Service</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua!
</p>
<a href="#" class="btn">Read More</a>
</header>
<div class="top-box top-box-a">
<h2>Routine Services</h2>
<p class="price">Starting at $199</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.
</p>
</div>
<div class="top-box top-box-b">
<h2>Tree Removal</h2>
<p class="price">From $299 - $799</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.
</p>
</div>
</section>
<section class="boxes">
<div class="box">
<i class="fas fa-tree fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-tools fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-users fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-clock fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</section>
<section class="info">
<img src="https://source.unsplash.com/random">
<div>
<h2>Over 20 Years Experience</h2>
<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>
</section>
<section class="portfolio">
<img src="https://source.unsplash.com/random/200x200">
<img src="https://source.unsplash.com/random/200x201">
<img src="https://source.unsplash.com/random/200x202">
<img src="https://source.unsplash.com/random/200x203">
<img src="https://source.unsplash.com/random/200x204">
<img src="https://source.unsplash.com/random/200x205">
<img src="https://source.unsplash.com/random/200x206">
<img src="https://source.unsplash.com/random/200x207">
<img src="https://source.unsplash.com/random/200x208">
</section>
<footer>Victor's Tree Service © 2019</footer>
</div>
<!--Wrapper Ends -->
</body>
</html>answered Jan 3 at 21:34
Pawan KumarPawan Kumar
1,086312
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54029761%2fheader-text-overlapping-on-wrap%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
4
This is not a grid or flex or padding / margin issue. It's a line-height issue.
In particular, the problem is line-height: 1.6rem set on the body element.
The line-height property sets the minimum height of line boxes, where inline elements, such as text, exist.
A typical default value in most browsers is 1.2 (MDN) – notice the unitless value; more on that later.
In addition, the line-height property is inheritable (MDN), which means that elements down the HTML structure take the value you've set higher up.
Since you haven't defined a line-height value anywhere below the body element, that setting applies throughout your document.
So here's the problem:
You've set your h1 to 4rem.
But a 1.6rem line height cannot accommodate that size.
(4 * 16px) > (1.6 * 16px)
Here's your layout in normal desktop mode:
Notice how the heading is already exceeding the boundaries of the line box.
Because of this short line height, the text overlaps on wrap (as on smaller screens):
The solution, believe it or not, is simply to remove the unit of length from the line-height value.
So instead of line-height: 1.6rem, use line-height: 1.6.
You may even want to consider using the 1.2 default value (in which case, you can omit the line-height rule altogether).
The reason this works is as follows:
When you use line-height: 1.6rem, the line box height is calculated based on the root element's font size. In your case, that happens to be 16px (the browser's default value).
line box height: 1.6 * 16px = 25.6px
h1 font size: 4.0 * 16px = 64.0px
That's how the h1 exceeds the height of the line box.
But with line-height: 1.6, the line box height is calculated based on the size of the font itself.
line box height: 1.6 * (4 * 16px) = 102.4px
h1 font size: 4.0 * 16px = 64.0px
That's how the line box exceeds the height of the h1.
It's also why it makes sense to use unitless values in the line-height property.
See the spec for references and more details:
- 10.8 Line height calculations: the
line-heightandvertical-alignproperties
answered Jan 4 at 1:50
Michael_BMichael_B
158k50255363
1
Perfect thank you, I ended up figuring this out, but your explanation is incredibly helpful in understanding why.
– Adag89
Jan 4 at 1:59
1
To be more accurate, the line-height applied to the container (body here) define the minimum height of line-box and the line-height applied to text element define the height. But as you said and due to inheritance both can be merged to only one but if we only change the line-height of the elements and we keep the one of the body it will also work (stackoverflow.com/a/54342051/8620333)
– Temani Afif
Feb 18 at 13:38
Thanks for the additional clarification @TemaniAfif
– Michael_B
Feb 18 at 14:01
add a comment |
4
This is not a grid or flex or padding / margin issue. It's a line-height issue.
In particular, the problem is line-height: 1.6rem set on the body element.
The line-height property sets the minimum height of line boxes, where inline elements, such as text, exist.
A typical default value in most browsers is 1.2 (MDN) – notice the unitless value; more on that later.
In addition, the line-height property is inheritable (MDN), which means that elements down the HTML structure take the value you've set higher up.
Since you haven't defined a line-height value anywhere below the body element, that setting applies throughout your document.
So here's the problem:
You've set your h1 to 4rem.
But a 1.6rem line height cannot accommodate that size.
(4 * 16px) > (1.6 * 16px)
Here's your layout in normal desktop mode:
Notice how the heading is already exceeding the boundaries of the line box.
Because of this short line height, the text overlaps on wrap (as on smaller screens):
The solution, believe it or not, is simply to remove the unit of length from the line-height value.
So instead of line-height: 1.6rem, use line-height: 1.6.
You may even want to consider using the 1.2 default value (in which case, you can omit the line-height rule altogether).
The reason this works is as follows:
When you use line-height: 1.6rem, the line box height is calculated based on the root element's font size. In your case, that happens to be 16px (the browser's default value).
line box height: 1.6 * 16px = 25.6px
h1 font size: 4.0 * 16px = 64.0px
That's how the h1 exceeds the height of the line box.
But with line-height: 1.6, the line box height is calculated based on the size of the font itself.
line box height: 1.6 * (4 * 16px) = 102.4px
h1 font size: 4.0 * 16px = 64.0px
That's how the line box exceeds the height of the h1.
It's also why it makes sense to use unitless values in the line-height property.
See the spec for references and more details:
- 10.8 Line height calculations: the
line-heightandvertical-alignproperties
answered Jan 4 at 1:50
Michael_BMichael_B
158k50255363
1
Perfect thank you, I ended up figuring this out, but your explanation is incredibly helpful in understanding why.
– Adag89
Jan 4 at 1:59
1
To be more accurate, the line-height applied to the container (body here) define the minimum height of line-box and the line-height applied to text element define the height. But as you said and due to inheritance both can be merged to only one but if we only change the line-height of the elements and we keep the one of the body it will also work (stackoverflow.com/a/54342051/8620333)
– Temani Afif
Feb 18 at 13:38
Thanks for the additional clarification @TemaniAfif
– Michael_B
Feb 18 at 14:01
add a comment |
4
4
4
This is not a grid or flex or padding / margin issue. It's a line-height issue.
In particular, the problem is line-height: 1.6rem set on the body element.
The line-height property sets the minimum height of line boxes, where inline elements, such as text, exist.
A typical default value in most browsers is 1.2 (MDN) – notice the unitless value; more on that later.
In addition, the line-height property is inheritable (MDN), which means that elements down the HTML structure take the value you've set higher up.
Since you haven't defined a line-height value anywhere below the body element, that setting applies throughout your document.
So here's the problem:
You've set your h1 to 4rem.
But a 1.6rem line height cannot accommodate that size.
(4 * 16px) > (1.6 * 16px)
Here's your layout in normal desktop mode:
Notice how the heading is already exceeding the boundaries of the line box.
Because of this short line height, the text overlaps on wrap (as on smaller screens):
The solution, believe it or not, is simply to remove the unit of length from the line-height value.
So instead of line-height: 1.6rem, use line-height: 1.6.
You may even want to consider using the 1.2 default value (in which case, you can omit the line-height rule altogether).
The reason this works is as follows:
When you use line-height: 1.6rem, the line box height is calculated based on the root element's font size. In your case, that happens to be 16px (the browser's default value).
line box height: 1.6 * 16px = 25.6px
h1 font size: 4.0 * 16px = 64.0px
That's how the h1 exceeds the height of the line box.
But with line-height: 1.6, the line box height is calculated based on the size of the font itself.
line box height: 1.6 * (4 * 16px) = 102.4px
h1 font size: 4.0 * 16px = 64.0px
That's how the line box exceeds the height of the h1.
It's also why it makes sense to use unitless values in the line-height property.
See the spec for references and more details:
- 10.8 Line height calculations: the
line-heightandvertical-alignproperties
answered Jan 4 at 1:50
Michael_BMichael_B
158k50255363
This is not a grid or flex or padding / margin issue. It's a line-height issue.
In particular, the problem is line-height: 1.6rem set on the body element.
The line-height property sets the minimum height of line boxes, where inline elements, such as text, exist.
A typical default value in most browsers is 1.2 (MDN) – notice the unitless value; more on that later.
In addition, the line-height property is inheritable (MDN), which means that elements down the HTML structure take the value you've set higher up.
Since you haven't defined a line-height value anywhere below the body element, that setting applies throughout your document.
So here's the problem:
You've set your h1 to 4rem.
But a 1.6rem line height cannot accommodate that size.
(4 * 16px) > (1.6 * 16px)
Here's your layout in normal desktop mode:
Notice how the heading is already exceeding the boundaries of the line box.
Because of this short line height, the text overlaps on wrap (as on smaller screens):
The solution, believe it or not, is simply to remove the unit of length from the line-height value.
So instead of line-height: 1.6rem, use line-height: 1.6.
You may even want to consider using the 1.2 default value (in which case, you can omit the line-height rule altogether).
The reason this works is as follows:
When you use line-height: 1.6rem, the line box height is calculated based on the root element's font size. In your case, that happens to be 16px (the browser's default value).
line box height: 1.6 * 16px = 25.6px
h1 font size: 4.0 * 16px = 64.0px
That's how the h1 exceeds the height of the line box.
But with line-height: 1.6, the line box height is calculated based on the size of the font itself.
line box height: 1.6 * (4 * 16px) = 102.4px
h1 font size: 4.0 * 16px = 64.0px
That's how the line box exceeds the height of the h1.
It's also why it makes sense to use unitless values in the line-height property.
See the spec for references and more details:
- 10.8 Line height calculations: the
line-heightandvertical-alignproperties
answered Jan 4 at 1:50
Michael_BMichael_B
158k50255363
edited Jan 4 at 2:38
answered Jan 4 at 1:50
Michael_BMichael_B
158k50255363
answered Jan 4 at 1:50
Michael_BMichael_B
158k50255363
answered Jan 4 at 1:50
Michael_BMichael_B
158k50255363
158k50255363
1
Perfect thank you, I ended up figuring this out, but your explanation is incredibly helpful in understanding why.
– Adag89
Jan 4 at 1:59
1
To be more accurate, the line-height applied to the container (body here) define the minimum height of line-box and the line-height applied to text element define the height. But as you said and due to inheritance both can be merged to only one but if we only change the line-height of the elements and we keep the one of the body it will also work (stackoverflow.com/a/54342051/8620333)
– Temani Afif
Feb 18 at 13:38
Thanks for the additional clarification @TemaniAfif
– Michael_B
Feb 18 at 14:01
add a comment |
1
Perfect thank you, I ended up figuring this out, but your explanation is incredibly helpful in understanding why.
– Adag89
Jan 4 at 1:59
1
To be more accurate, the line-height applied to the container (body here) define the minimum height of line-box and the line-height applied to text element define the height. But as you said and due to inheritance both can be merged to only one but if we only change the line-height of the elements and we keep the one of the body it will also work (stackoverflow.com/a/54342051/8620333)
– Temani Afif
Feb 18 at 13:38
Thanks for the additional clarification @TemaniAfif
– Michael_B
Feb 18 at 14:01
1
1
Perfect thank you, I ended up figuring this out, but your explanation is incredibly helpful in understanding why.
– Adag89
Jan 4 at 1:59
Perfect thank you, I ended up figuring this out, but your explanation is incredibly helpful in understanding why.
– Adag89
Jan 4 at 1:59
1
1
To be more accurate, the line-height applied to the container (body here) define the minimum height of line-box and the line-height applied to text element define the height. But as you said and due to inheritance both can be merged to only one but if we only change the line-height of the elements and we keep the one of the body it will also work (stackoverflow.com/a/54342051/8620333)
– Temani Afif
Feb 18 at 13:38
To be more accurate, the line-height applied to the container (body here) define the minimum height of line-box and the line-height applied to text element define the height. But as you said and due to inheritance both can be merged to only one but if we only change the line-height of the elements and we keep the one of the body it will also work (stackoverflow.com/a/54342051/8620333)
– Temani Afif
Feb 18 at 13:38
Thanks for the additional clarification @TemaniAfif
– Michael_B
Feb 18 at 14:01
Thanks for the additional clarification @TemaniAfif
– Michael_B
Feb 18 at 14:01
add a comment |
0
Use media query for responsiveness and it should be written at the end of the css so that css properties written under media query will not get override with any other css properties.
@media screen and (max-width: 600px) {
.main-nav a {
text-align: center;
float: none;
}
}
Instead of display:grid, use display:block so that it will take entire space and use float:left so that all the elements will be positioned to the left of the container.
body {
background: var(--primary);
margin: 30px 50px;
line-height: 1.6rem;
}
img {
max-width: 100%;
}
.wrapper {
display: grid;
grid-gap: 1.2rem;
}
.main-nav ul {
display: block;
padding: 0;
list-style: none;
}
.main-nav a {
background: var(--dark);
display: block;
text-decoration: none;
margin: 0.8rem;
/*use margin instead of padding so that it will be clickable only on the element*/
color: var(--primary);
text-transform: uppercase;
font-size: 1.1rem;
box-shadow: var(--shadow);
text-align: center;
float: left;
border: 1px solid red;
/*just to highlight the clickable el*/
}
.btn {
color: var(--primary);
background: var(--dark);
padding: 0.6rem 1.3rem;
text-decoration: none;
border: 0;
box-shadow: var(--shadow);
}
.main-nav a:hover {
background: var(--primary);
color: var(--dark);
}
.top-container {
display: grid;
grid-gap: 1.2rem;
grid-template-areas: 'showcase showcase top-box-a' 'showcase showcase top-box-b';
}
.showcase {
grid-area: showcase;
min-height: 400px;
background: url("https://source.unsplash.com/random");
background-size: cover;
background-position: center;
padding: 3rem;
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
color: black;
box-shadow: var(--shadow);
}
.showcase h1 {
font-size: 4rem;
margin-bottom: 0.5rem;
}
.showcase p {
font-size: 1.3rem;
margin-top: 0;
}
.top-box {
background: #545454;
color: var(--primary);
padding: 1.5rem;
text-align: center;
align-items: center;
box-shadow: var(--shadow);
justify-items: center;
}
.top-box .price {
font-size: 1.4rem;
}
.top-box-a {
grid-area: top-box-a;
}
.top-box-b {
grid-area: top-box-b;
}
.boxes {
display: grid;
grid-gap: 1.3rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.box {
background: var(--dark);
color: var(--primary);
text-align: center;
padding: 1.5rem 2rem;
box-shadow: var(--shadow);
}
@media screen and (max-width: 600px) {
.main-nav a {
text-align: center;
float: none;
}
}<!DOCTYPE html>
<html>
<head>
<title>Victors Tree Service</title>
<link rel="stylesheet" type="text/css" href="C:UsersgeekDesktopExperimentalstyles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-
UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<!-- Wrapper Begins-->
<div class="wrapper">
<nav class="main-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</nav>
<section class="top-container">
<header class="showcase">
<h1>Victors Tree Service</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua!
</p>
<a href="#" class="btn">Read More</a>
</header>
<div class="top-box top-box-a">
<h2>Routine Services</h2>
<p class="price">Starting at $199</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.
</p>
</div>
<div class="top-box top-box-b">
<h2>Tree Removal</h2>
<p class="price">From $299 - $799</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.
</p>
</div>
</section>
<section class="boxes">
<div class="box">
<i class="fas fa-tree fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-tools fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-users fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-clock fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</section>
<section class="info">
<img src="https://source.unsplash.com/random">
<div>
<h2>Over 20 Years Experience</h2>
<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>
</section>
<section class="portfolio">
<img src="https://source.unsplash.com/random/200x200">
<img src="https://source.unsplash.com/random/200x201">
<img src="https://source.unsplash.com/random/200x202">
<img src="https://source.unsplash.com/random/200x203">
<img src="https://source.unsplash.com/random/200x204">
<img src="https://source.unsplash.com/random/200x205">
<img src="https://source.unsplash.com/random/200x206">
<img src="https://source.unsplash.com/random/200x207">
<img src="https://source.unsplash.com/random/200x208">
</section>
<footer>Victor's Tree Service © 2019</footer>
</div>
<!--Wrapper Ends -->
</body>
</html>answered Jan 3 at 21:34
Pawan KumarPawan Kumar
1,086312
add a comment |
0
Use media query for responsiveness and it should be written at the end of the css so that css properties written under media query will not get override with any other css properties.
@media screen and (max-width: 600px) {
.main-nav a {
text-align: center;
float: none;
}
}
Instead of display:grid, use display:block so that it will take entire space and use float:left so that all the elements will be positioned to the left of the container.
body {
background: var(--primary);
margin: 30px 50px;
line-height: 1.6rem;
}
img {
max-width: 100%;
}
.wrapper {
display: grid;
grid-gap: 1.2rem;
}
.main-nav ul {
display: block;
padding: 0;
list-style: none;
}
.main-nav a {
background: var(--dark);
display: block;
text-decoration: none;
margin: 0.8rem;
/*use margin instead of padding so that it will be clickable only on the element*/
color: var(--primary);
text-transform: uppercase;
font-size: 1.1rem;
box-shadow: var(--shadow);
text-align: center;
float: left;
border: 1px solid red;
/*just to highlight the clickable el*/
}
.btn {
color: var(--primary);
background: var(--dark);
padding: 0.6rem 1.3rem;
text-decoration: none;
border: 0;
box-shadow: var(--shadow);
}
.main-nav a:hover {
background: var(--primary);
color: var(--dark);
}
.top-container {
display: grid;
grid-gap: 1.2rem;
grid-template-areas: 'showcase showcase top-box-a' 'showcase showcase top-box-b';
}
.showcase {
grid-area: showcase;
min-height: 400px;
background: url("https://source.unsplash.com/random");
background-size: cover;
background-position: center;
padding: 3rem;
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
color: black;
box-shadow: var(--shadow);
}
.showcase h1 {
font-size: 4rem;
margin-bottom: 0.5rem;
}
.showcase p {
font-size: 1.3rem;
margin-top: 0;
}
.top-box {
background: #545454;
color: var(--primary);
padding: 1.5rem;
text-align: center;
align-items: center;
box-shadow: var(--shadow);
justify-items: center;
}
.top-box .price {
font-size: 1.4rem;
}
.top-box-a {
grid-area: top-box-a;
}
.top-box-b {
grid-area: top-box-b;
}
.boxes {
display: grid;
grid-gap: 1.3rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.box {
background: var(--dark);
color: var(--primary);
text-align: center;
padding: 1.5rem 2rem;
box-shadow: var(--shadow);
}
@media screen and (max-width: 600px) {
.main-nav a {
text-align: center;
float: none;
}
}<!DOCTYPE html>
<html>
<head>
<title>Victors Tree Service</title>
<link rel="stylesheet" type="text/css" href="C:UsersgeekDesktopExperimentalstyles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-
UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<!-- Wrapper Begins-->
<div class="wrapper">
<nav class="main-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</nav>
<section class="top-container">
<header class="showcase">
<h1>Victors Tree Service</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua!
</p>
<a href="#" class="btn">Read More</a>
</header>
<div class="top-box top-box-a">
<h2>Routine Services</h2>
<p class="price">Starting at $199</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.
</p>
</div>
<div class="top-box top-box-b">
<h2>Tree Removal</h2>
<p class="price">From $299 - $799</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.
</p>
</div>
</section>
<section class="boxes">
<div class="box">
<i class="fas fa-tree fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-tools fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-users fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-clock fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</section>
<section class="info">
<img src="https://source.unsplash.com/random">
<div>
<h2>Over 20 Years Experience</h2>
<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>
</section>
<section class="portfolio">
<img src="https://source.unsplash.com/random/200x200">
<img src="https://source.unsplash.com/random/200x201">
<img src="https://source.unsplash.com/random/200x202">
<img src="https://source.unsplash.com/random/200x203">
<img src="https://source.unsplash.com/random/200x204">
<img src="https://source.unsplash.com/random/200x205">
<img src="https://source.unsplash.com/random/200x206">
<img src="https://source.unsplash.com/random/200x207">
<img src="https://source.unsplash.com/random/200x208">
</section>
<footer>Victor's Tree Service © 2019</footer>
</div>
<!--Wrapper Ends -->
</body>
</html>answered Jan 3 at 21:34
Pawan KumarPawan Kumar
1,086312
add a comment |
0
0
0
Use media query for responsiveness and it should be written at the end of the css so that css properties written under media query will not get override with any other css properties.
@media screen and (max-width: 600px) {
.main-nav a {
text-align: center;
float: none;
}
}
Instead of display:grid, use display:block so that it will take entire space and use float:left so that all the elements will be positioned to the left of the container.
body {
background: var(--primary);
margin: 30px 50px;
line-height: 1.6rem;
}
img {
max-width: 100%;
}
.wrapper {
display: grid;
grid-gap: 1.2rem;
}
.main-nav ul {
display: block;
padding: 0;
list-style: none;
}
.main-nav a {
background: var(--dark);
display: block;
text-decoration: none;
margin: 0.8rem;
/*use margin instead of padding so that it will be clickable only on the element*/
color: var(--primary);
text-transform: uppercase;
font-size: 1.1rem;
box-shadow: var(--shadow);
text-align: center;
float: left;
border: 1px solid red;
/*just to highlight the clickable el*/
}
.btn {
color: var(--primary);
background: var(--dark);
padding: 0.6rem 1.3rem;
text-decoration: none;
border: 0;
box-shadow: var(--shadow);
}
.main-nav a:hover {
background: var(--primary);
color: var(--dark);
}
.top-container {
display: grid;
grid-gap: 1.2rem;
grid-template-areas: 'showcase showcase top-box-a' 'showcase showcase top-box-b';
}
.showcase {
grid-area: showcase;
min-height: 400px;
background: url("https://source.unsplash.com/random");
background-size: cover;
background-position: center;
padding: 3rem;
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
color: black;
box-shadow: var(--shadow);
}
.showcase h1 {
font-size: 4rem;
margin-bottom: 0.5rem;
}
.showcase p {
font-size: 1.3rem;
margin-top: 0;
}
.top-box {
background: #545454;
color: var(--primary);
padding: 1.5rem;
text-align: center;
align-items: center;
box-shadow: var(--shadow);
justify-items: center;
}
.top-box .price {
font-size: 1.4rem;
}
.top-box-a {
grid-area: top-box-a;
}
.top-box-b {
grid-area: top-box-b;
}
.boxes {
display: grid;
grid-gap: 1.3rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.box {
background: var(--dark);
color: var(--primary);
text-align: center;
padding: 1.5rem 2rem;
box-shadow: var(--shadow);
}
@media screen and (max-width: 600px) {
.main-nav a {
text-align: center;
float: none;
}
}<!DOCTYPE html>
<html>
<head>
<title>Victors Tree Service</title>
<link rel="stylesheet" type="text/css" href="C:UsersgeekDesktopExperimentalstyles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-
UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<!-- Wrapper Begins-->
<div class="wrapper">
<nav class="main-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</nav>
<section class="top-container">
<header class="showcase">
<h1>Victors Tree Service</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua!
</p>
<a href="#" class="btn">Read More</a>
</header>
<div class="top-box top-box-a">
<h2>Routine Services</h2>
<p class="price">Starting at $199</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.
</p>
</div>
<div class="top-box top-box-b">
<h2>Tree Removal</h2>
<p class="price">From $299 - $799</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.
</p>
</div>
</section>
<section class="boxes">
<div class="box">
<i class="fas fa-tree fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-tools fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-users fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-clock fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</section>
<section class="info">
<img src="https://source.unsplash.com/random">
<div>
<h2>Over 20 Years Experience</h2>
<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>
</section>
<section class="portfolio">
<img src="https://source.unsplash.com/random/200x200">
<img src="https://source.unsplash.com/random/200x201">
<img src="https://source.unsplash.com/random/200x202">
<img src="https://source.unsplash.com/random/200x203">
<img src="https://source.unsplash.com/random/200x204">
<img src="https://source.unsplash.com/random/200x205">
<img src="https://source.unsplash.com/random/200x206">
<img src="https://source.unsplash.com/random/200x207">
<img src="https://source.unsplash.com/random/200x208">
</section>
<footer>Victor's Tree Service © 2019</footer>
</div>
<!--Wrapper Ends -->
</body>
</html>answered Jan 3 at 21:34
Pawan KumarPawan Kumar
1,086312
Use media query for responsiveness and it should be written at the end of the css so that css properties written under media query will not get override with any other css properties.
@media screen and (max-width: 600px) {
.main-nav a {
text-align: center;
float: none;
}
}
Instead of display:grid, use display:block so that it will take entire space and use float:left so that all the elements will be positioned to the left of the container.
body {
background: var(--primary);
margin: 30px 50px;
line-height: 1.6rem;
}
img {
max-width: 100%;
}
.wrapper {
display: grid;
grid-gap: 1.2rem;
}
.main-nav ul {
display: block;
padding: 0;
list-style: none;
}
.main-nav a {
background: var(--dark);
display: block;
text-decoration: none;
margin: 0.8rem;
/*use margin instead of padding so that it will be clickable only on the element*/
color: var(--primary);
text-transform: uppercase;
font-size: 1.1rem;
box-shadow: var(--shadow);
text-align: center;
float: left;
border: 1px solid red;
/*just to highlight the clickable el*/
}
.btn {
color: var(--primary);
background: var(--dark);
padding: 0.6rem 1.3rem;
text-decoration: none;
border: 0;
box-shadow: var(--shadow);
}
.main-nav a:hover {
background: var(--primary);
color: var(--dark);
}
.top-container {
display: grid;
grid-gap: 1.2rem;
grid-template-areas: 'showcase showcase top-box-a' 'showcase showcase top-box-b';
}
.showcase {
grid-area: showcase;
min-height: 400px;
background: url("https://source.unsplash.com/random");
background-size: cover;
background-position: center;
padding: 3rem;
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
color: black;
box-shadow: var(--shadow);
}
.showcase h1 {
font-size: 4rem;
margin-bottom: 0.5rem;
}
.showcase p {
font-size: 1.3rem;
margin-top: 0;
}
.top-box {
background: #545454;
color: var(--primary);
padding: 1.5rem;
text-align: center;
align-items: center;
box-shadow: var(--shadow);
justify-items: center;
}
.top-box .price {
font-size: 1.4rem;
}
.top-box-a {
grid-area: top-box-a;
}
.top-box-b {
grid-area: top-box-b;
}
.boxes {
display: grid;
grid-gap: 1.3rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.box {
background: var(--dark);
color: var(--primary);
text-align: center;
padding: 1.5rem 2rem;
box-shadow: var(--shadow);
}
@media screen and (max-width: 600px) {
.main-nav a {
text-align: center;
float: none;
}
}<!DOCTYPE html>
<html>
<head>
<title>Victors Tree Service</title>
<link rel="stylesheet" type="text/css" href="C:UsersgeekDesktopExperimentalstyles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-
UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<!-- Wrapper Begins-->
<div class="wrapper">
<nav class="main-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</nav>
<section class="top-container">
<header class="showcase">
<h1>Victors Tree Service</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua!
</p>
<a href="#" class="btn">Read More</a>
</header>
<div class="top-box top-box-a">
<h2>Routine Services</h2>
<p class="price">Starting at $199</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.
</p>
</div>
<div class="top-box top-box-b">
<h2>Tree Removal</h2>
<p class="price">From $299 - $799</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.
</p>
</div>
</section>
<section class="boxes">
<div class="box">
<i class="fas fa-tree fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-tools fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-users fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-clock fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</section>
<section class="info">
<img src="https://source.unsplash.com/random">
<div>
<h2>Over 20 Years Experience</h2>
<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>
</section>
<section class="portfolio">
<img src="https://source.unsplash.com/random/200x200">
<img src="https://source.unsplash.com/random/200x201">
<img src="https://source.unsplash.com/random/200x202">
<img src="https://source.unsplash.com/random/200x203">
<img src="https://source.unsplash.com/random/200x204">
<img src="https://source.unsplash.com/random/200x205">
<img src="https://source.unsplash.com/random/200x206">
<img src="https://source.unsplash.com/random/200x207">
<img src="https://source.unsplash.com/random/200x208">
</section>
<footer>Victor's Tree Service © 2019</footer>
</div>
<!--Wrapper Ends -->
</body>
</html>body {
background: var(--primary);
margin: 30px 50px;
line-height: 1.6rem;
}
img {
max-width: 100%;
}
.wrapper {
display: grid;
grid-gap: 1.2rem;
}
.main-nav ul {
display: block;
padding: 0;
list-style: none;
}
.main-nav a {
background: var(--dark);
display: block;
text-decoration: none;
margin: 0.8rem;
/*use margin instead of padding so that it will be clickable only on the element*/
color: var(--primary);
text-transform: uppercase;
font-size: 1.1rem;
box-shadow: var(--shadow);
text-align: center;
float: left;
border: 1px solid red;
/*just to highlight the clickable el*/
}
.btn {
color: var(--primary);
background: var(--dark);
padding: 0.6rem 1.3rem;
text-decoration: none;
border: 0;
box-shadow: var(--shadow);
}
.main-nav a:hover {
background: var(--primary);
color: var(--dark);
}
.top-container {
display: grid;
grid-gap: 1.2rem;
grid-template-areas: 'showcase showcase top-box-a' 'showcase showcase top-box-b';
}
.showcase {
grid-area: showcase;
min-height: 400px;
background: url("https://source.unsplash.com/random");
background-size: cover;
background-position: center;
padding: 3rem;
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
color: black;
box-shadow: var(--shadow);
}
.showcase h1 {
font-size: 4rem;
margin-bottom: 0.5rem;
}
.showcase p {
font-size: 1.3rem;
margin-top: 0;
}
.top-box {
background: #545454;
color: var(--primary);
padding: 1.5rem;
text-align: center;
align-items: center;
box-shadow: var(--shadow);
justify-items: center;
}
.top-box .price {
font-size: 1.4rem;
}
.top-box-a {
grid-area: top-box-a;
}
.top-box-b {
grid-area: top-box-b;
}
.boxes {
display: grid;
grid-gap: 1.3rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.box {
background: var(--dark);
color: var(--primary);
text-align: center;
padding: 1.5rem 2rem;
box-shadow: var(--shadow);
}
@media screen and (max-width: 600px) {
.main-nav a {
text-align: center;
float: none;
}
}<!DOCTYPE html>
<html>
<head>
<title>Victors Tree Service</title>
<link rel="stylesheet" type="text/css" href="C:UsersgeekDesktopExperimentalstyles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-
UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<!-- Wrapper Begins-->
<div class="wrapper">
<nav class="main-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</nav>
<section class="top-container">
<header class="showcase">
<h1>Victors Tree Service</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua!
</p>
<a href="#" class="btn">Read More</a>
</header>
<div class="top-box top-box-a">
<h2>Routine Services</h2>
<p class="price">Starting at $199</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.
</p>
</div>
<div class="top-box top-box-b">
<h2>Tree Removal</h2>
<p class="price">From $299 - $799</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.
</p>
</div>
</section>
<section class="boxes">
<div class="box">
<i class="fas fa-tree fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-tools fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-users fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-clock fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</section>
<section class="info">
<img src="https://source.unsplash.com/random">
<div>
<h2>Over 20 Years Experience</h2>
<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>
</section>
<section class="portfolio">
<img src="https://source.unsplash.com/random/200x200">
<img src="https://source.unsplash.com/random/200x201">
<img src="https://source.unsplash.com/random/200x202">
<img src="https://source.unsplash.com/random/200x203">
<img src="https://source.unsplash.com/random/200x204">
<img src="https://source.unsplash.com/random/200x205">
<img src="https://source.unsplash.com/random/200x206">
<img src="https://source.unsplash.com/random/200x207">
<img src="https://source.unsplash.com/random/200x208">
</section>
<footer>Victor's Tree Service © 2019</footer>
</div>
<!--Wrapper Ends -->
</body>
</html>body {
background: var(--primary);
margin: 30px 50px;
line-height: 1.6rem;
}
img {
max-width: 100%;
}
.wrapper {
display: grid;
grid-gap: 1.2rem;
}
.main-nav ul {
display: block;
padding: 0;
list-style: none;
}
.main-nav a {
background: var(--dark);
display: block;
text-decoration: none;
margin: 0.8rem;
/*use margin instead of padding so that it will be clickable only on the element*/
color: var(--primary);
text-transform: uppercase;
font-size: 1.1rem;
box-shadow: var(--shadow);
text-align: center;
float: left;
border: 1px solid red;
/*just to highlight the clickable el*/
}
.btn {
color: var(--primary);
background: var(--dark);
padding: 0.6rem 1.3rem;
text-decoration: none;
border: 0;
box-shadow: var(--shadow);
}
.main-nav a:hover {
background: var(--primary);
color: var(--dark);
}
.top-container {
display: grid;
grid-gap: 1.2rem;
grid-template-areas: 'showcase showcase top-box-a' 'showcase showcase top-box-b';
}
.showcase {
grid-area: showcase;
min-height: 400px;
background: url("https://source.unsplash.com/random");
background-size: cover;
background-position: center;
padding: 3rem;
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
color: black;
box-shadow: var(--shadow);
}
.showcase h1 {
font-size: 4rem;
margin-bottom: 0.5rem;
}
.showcase p {
font-size: 1.3rem;
margin-top: 0;
}
.top-box {
background: #545454;
color: var(--primary);
padding: 1.5rem;
text-align: center;
align-items: center;
box-shadow: var(--shadow);
justify-items: center;
}
.top-box .price {
font-size: 1.4rem;
}
.top-box-a {
grid-area: top-box-a;
}
.top-box-b {
grid-area: top-box-b;
}
.boxes {
display: grid;
grid-gap: 1.3rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.box {
background: var(--dark);
color: var(--primary);
text-align: center;
padding: 1.5rem 2rem;
box-shadow: var(--shadow);
}
@media screen and (max-width: 600px) {
.main-nav a {
text-align: center;
float: none;
}
}<!DOCTYPE html>
<html>
<head>
<title>Victors Tree Service</title>
<link rel="stylesheet" type="text/css" href="C:UsersgeekDesktopExperimentalstyles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-
UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<!-- Wrapper Begins-->
<div class="wrapper">
<nav class="main-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</nav>
<section class="top-container">
<header class="showcase">
<h1>Victors Tree Service</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua!
</p>
<a href="#" class="btn">Read More</a>
</header>
<div class="top-box top-box-a">
<h2>Routine Services</h2>
<p class="price">Starting at $199</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.
</p>
</div>
<div class="top-box top-box-b">
<h2>Tree Removal</h2>
<p class="price">From $299 - $799</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.
</p>
</div>
</section>
<section class="boxes">
<div class="box">
<i class="fas fa-tree fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-tools fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-users fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<i class="fas fa-clock fa-4x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</section>
<section class="info">
<img src="https://source.unsplash.com/random">
<div>
<h2>Over 20 Years Experience</h2>
<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>
</section>
<section class="portfolio">
<img src="https://source.unsplash.com/random/200x200">
<img src="https://source.unsplash.com/random/200x201">
<img src="https://source.unsplash.com/random/200x202">
<img src="https://source.unsplash.com/random/200x203">
<img src="https://source.unsplash.com/random/200x204">
<img src="https://source.unsplash.com/random/200x205">
<img src="https://source.unsplash.com/random/200x206">
<img src="https://source.unsplash.com/random/200x207">
<img src="https://source.unsplash.com/random/200x208">
</section>
<footer>Victor's Tree Service © 2019</footer>
</div>
<!--Wrapper Ends -->
</body>
</html>answered Jan 3 at 21:34
Pawan KumarPawan Kumar
1,086312
edited Jan 21 at 21:31
answered Jan 3 at 21:34
Pawan KumarPawan Kumar
1,086312
answered Jan 3 at 21:34
Pawan KumarPawan Kumar
1,086312
answered Jan 3 at 21:34
Pawan KumarPawan Kumar
1,086312
1,086312
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54029761%2fheader-text-overlapping-on-wrap%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
