I need to do the same of the snnipet, but without height in .footer
.footer {
background: blue;
width: 1200px;
height: 250px; //I NEED TO CHANGE THIS
}
.footer .container {
width: 100%;
height: 100%;
margin: 0 auto;
}
.footer .container .col-25 {
width: 25%;
float: left;
box-sizing: border-box;
height: 100%;
padding: 0 30px;
}
.footer .container .col-25 .footer-col {
color: #fff;
height: 100%;
display: inline-block;
position: relative;
}
.footer .container .col-25 .footer-col h2 {
font-size: 18px;
}
.footer .container .col-25 .footer-col input[type="button"] {
font-size: 16px;
color: #3da6cc;
background: #fff;
padding: 10px;
width: 100%;
border: none;
border-radius: 3px;
position: absolute;
bottom: 10px;
}
.footer .container .col-25 .footer-col.present .text-centered-y {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.footer .container .col-25 .footer-col.present .text-centered-y h1 {
font-style: italic;
}
.footer .container .col-25 .footer-col.present .text-centered-y h1 span {
color: #29738e;
}
.footer .container .col-25 .footer-col.present .text-centered-y h3 {
font-weight: lighter;
}
<div class="footer">
<div class="container">
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
</div>
</div>
Here is the code. Even you don't need to set height. Or you can change too. Or You can extend paragraph/content
.footer {
background: blue;
width: 1200px;
}
.footer .container {
width: 100%;
height: 100%;
margin: 0 auto;
display: flex;
}
.footer .container .col-25 {
width: 25%;
box-sizing: border-box;
padding: 0 30px;
padding-bottom: 50px;
}
.footer .container .col-25 .footer-col {
color: #fff;
height: 100%;
display: inline-block;
position: relative;
}
.footer .container .col-25 .footer-col h2 {
font-size: 18px;
}
.footer .container .col-25 .footer-col input[type="button"] {
font-size: 16px;
color: #3da6cc;
background: #fff;
padding: 10px;
width: 100%;
border: none;
border-radius: 3px;
position: absolute;
top: 100%;
}
.footer .container .col-25 .footer-col.present .text-centered-y {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.footer .container .col-25 .footer-col.present .text-centered-y h1 {
font-style: italic;
}
.footer .container .col-25 .footer-col.present .text-centered-y h1 span {
color: #29738e;
}
.footer .container .col-25 .footer-col.present .text-centered-y h3 {
font-weight: lighter;
}
<div class="footer">
<div class="container">
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
</div>
</div>
Related
.I want the breakpoint at 800px to place all three review divs side by side with 20px of padding around them but for whatever reason, it's not working. Can someone tell me where I went wrong? Currently, Reviewer 1 and 2 are stacked on top of each other to the left side of the container, while Review 3 is all by it's lonesome on the right. How do I change this?
Code snippet below:
HTML:
<div class="wrapper">
<div class="card-1">
<h3>Reviewer 1</h3>
<p class="border">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam."</p>
</div>
<div class="card-2">
<h3>Reviewer 2</h3>
<p class="border">"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam."</p>
</div>
</div>
<div class="card-3">
<h3>Reviewer 3</h3>
<p class="border">"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam."</p>
</div>
</div>
CSS:
.cards {
display: flex;
flex-direction: column;
align-items: center;
}
#media screen and (min-width: 800px) {
.cards {
display: flex;
flex-direction: row;
padding: 10px;
border: 1px black solid;
}
.border {
width: 75%;
padding: 10px;
margin: auto;
}
}
So I figured it out ironically enough. I just changed the .wrapper div as follows:
.wrapper {
display: flex;
flex-direction: row;
}
I am trying to get each individual box to slide up with content on hover but am unable to figure out how to the hover part to increase in height. So if the box was 350px x 350px and you hovered over it, it would increase in height to 650px x 350px to allow for a heading, text and a button. I have tried to increase the height based on :hover but tha obv didn't work.
Should I be using flex for this?
Can I accomplish this with CSS?
Can I use transition height on hover?
Does anyone have any suggestions as I am stumped.
Here is my code:
#import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
* {
box-sizing: border-box;
}
body {
font-family: Montserrat, sans-serif;
margin: 0;
padding: 3rem;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, 17rem);
gap: 2rem;
}
.item {
position: relative;
height: 19rem;
background-color: lightGrey;
overflow-y: hidden;
box-shadow: 0.1rem 0.1rem 1rem rgba(0, 0, 0, 0.1);
}
.item h3 {
margin: 0;
display: block;
background-color: turquoise;
padding: 1rem;
}
.item a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.item a:hover ~ .item__overlay, .item a:focus ~ .item__overlay {
transform: translate3d(0, 0, 0);
}
img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.item__overlay {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
position: absolute;
width: 100%;
top: 0;
transition: transform 300ms;
background-color: #82ebe0;
transform: translate3d(0, calc(100% - 3.5rem), 0);
}
.item__body {
flex-grow: 1;
padding: 1rem;
}
.item__body p {
margin: 0;
}
<div class="grid">
<div class="item">
<img src='https://images.unsplash.com/photo-1590424744257-fdb03ed78ae0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<div class="item__overlay">
<h3 id="person1" aria-hidden="true">Person 1</h3>
<div class="item__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="item">
<img src='https://images.unsplash.com/photo-1590424744257-fdb03ed78ae0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<div class="item__overlay">
<h3 id="person2" aria-hidden="true">Person 2</h3>
<div class="item__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="item">
<img src='https://images.unsplash.com/photo-1590424744257-fdb03ed78ae0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<div class="item__overlay">
<h3 id="person3" aria-hidden="true">Person 3</h3>
<div class="item__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="item">
<img src='https://images.unsplash.com/photo-1590424744257-fdb03ed78ae0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<div class="item__overlay">
<h3 id="person4" aria-hidden="true">Person 4</h3>
<div class="item__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
Make the height based on the content and the image position:absolute
#import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
* {
box-sizing: border-box;
}
body {
font-family: Montserrat, sans-serif;
margin: 0;
padding: 3rem;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, 17rem);
grid-auto-rows:1fr; /* remove this if you don't want equal rows*/
gap: 2rem;
}
.item {
position: relative;
background-color: lightGrey;
overflow-y: hidden;
box-shadow: 0.1rem 0.1rem 1rem rgba(0, 0, 0, 0.1);
}
.item h3 {
margin: 0;
display: block;
background-color: turquoise;
padding: 1rem;
}
.item a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.item a:hover ~ .item__overlay, .item a:focus ~ .item__overlay {
transform: translate3d(0, 0, 0);
}
img {
position:absolute;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.item__overlay {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
min-height: 100%;
transition: transform 300ms;
background-color: #82ebe0;
transform: translate3d(0, calc(100% - 3.5rem), 0);
}
.item__body {
flex-grow: 1;
padding: 1rem;
}
.item__body p {
margin: 0;
}
<div class="grid">
<div class="item">
<img src='https://images.unsplash.com/photo-1590424744257-fdb03ed78ae0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<div class="item__overlay">
<h3 id="person1" aria-hidden="true">Person 1</h3>
<div class="item__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="item">
<img src='https://images.unsplash.com/photo-1590424744257-fdb03ed78ae0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<div class="item__overlay">
<h3 id="person2" aria-hidden="true">Person 2</h3>
<div class="item__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="item">
<img src='https://images.unsplash.com/photo-1590424744257-fdb03ed78ae0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<div class="item__overlay">
<h3 id="person3" aria-hidden="true">Person 3</h3>
<div class="item__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="item">
<img src='https://images.unsplash.com/photo-1590424744257-fdb03ed78ae0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<div class="item__overlay">
<h3 id="person4" aria-hidden="true">Person 4</h3>
<div class="item__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
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>Home</li>
<li>Services</li>
<li>Contact</li>
<li>Gallery</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>
Read More
</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 -->
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-height and vertical-align properties
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:\Users\geek\Desktop\Experimental\styles.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>Home</li>
<li>Services</li>
<li>Contact</li>
<li>Gallery</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>
Read More
</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>
I have built this CSS tool tip:
DEMO
CSS:
.help {
position: relative
}
.help .help-text {
display: none;
background-color: #FDFCEF;
border: 1px solid #E8E5C1;
border-radius: 4px;
color: #333;
font-size: 12px;
font-weight: 400;
padding: 5px;
white-space: normal;
position: absolute;
z-index: 1000;
box-shadow: 0 1px 3px 3px rgba(0, 0, 0, .05);
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
margin-left: 60px;
margin-top: 12px;
line-height: 1.2
}
.help .help-text:after,
.help .help-text:before {
bottom: 100%;
left: 50%;
left: 13%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none
}
.help .help-text:after {
border-color: transparent transparent #FDFCEF;
border-width: 8px;
margin-left: -8px
}
.help .help-text:before {
border-color: transition transition #E8E5C1;
border-width: 10px;
margin-left: -10px
}
.help:hover .help-text {
display: block
}
.help-text {
width: 185px
}
.help-icon {
padding-left: 3px;
color: #789cbf;
font-size: .9em!important;
vertical-align: 0!important;
cursor: help
}
.other {
display: inline
}
p.inline {
display: inline-block
}
.inline {
display: inline-block
}
.box {
font-size: .65em;
color: #FFF;
background-color: #00cc4f;
font-weight: 700;
width: 97px;
height: 18px;
padding-top: 3px;
margin-top: 5px;
padding-bottom: 4px;
text-align: center;
font-family: 'Open Sans', sans-serif;
cursor: help
}
HTML:
<table border="1">
<col style="width:128px;" />
<col style="width:216px;" />
<col style="width:280px;" />
<thead>
<tr>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p class="inline">Sample A</p><span class="help"><span class="fa fa-question-circle fa-lg help-icon"></span><div class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div></span>
<span class="help"><div class="box">SAMPLE BOX</div><div class="help-text">im ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.</div></span>
<div>aaa</div>
<div class="other">Sample B</div><span class="help"><span class="fa fa-question-circle fa-lg help-icon"></span><div class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.</div></span>
</td>
<td>
</td>
<td><ul>
<li class="inline">Another Sample: C</li>
<span class="help">
<span class="fa fa-question-circle fa-lg help-icon"></span>
<div class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</span>
<li class="inline">Yet Another Great Sample - D:</li>
<span class="help">
<span class="fa fa-question-circle fa-lg help-icon"></span>
<div class="help-text">r sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dol ssssssssssssssss</div>
</span>
</ul>
</td>
</tr>
</tbody>
</table>
As you can see, for each sample the positioning comes out different.
I want it to be positioned according to the element containing the tip.
Also, is this code a good practice? does it work well on tablet as well? or should I some modification?
Also, is it better to use a java script based tool-tip? If so, which is the closest to my current one?
Change your margin-left: 60px; margin-top: 12px; to left: -15px; top: calc(100% + 5px);
I also corrected the syntax error having span as a direct child of ul
.help {
position: relative
}
.help .help-text {
display: none;
background-color: #FDFCEF;
border: 1px solid #E8E5C1;
border-radius: 4px;
color: #333;
font-size: 12px;
font-weight: 400;
padding: 5px;
white-space: normal;
position: absolute;
z-index: 1000;
box-shadow: 0 1px 3px 3px rgba(0, 0, 0, .05);
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
left: -15px;
top: calc(100% + 5px);
line-height: 1.2
}
.help .help-text:after,
.help .help-text:before {
bottom: 100%;
left: 50%;
left: 13%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none
}
.help .help-text:after {
border-color: transparent transparent #FDFCEF;
border-width: 8px;
margin-left: -8px
}
.help .help-text:before {
border-color: transition transition #E8E5C1;
border-width: 10px;
margin-left: -10px
}
.help:hover .help-text {
display: block
}
.help-text {
width: 185px
}
.help-icon {
padding-left: 3px;
color: #789cbf;
font-size: .9em!important;
vertical-align: 0!important;
cursor: help
}
.other {
display: inline
}
p.inline {
display: inline-block
}
.inline {
display: inline-block
}
.box {
font-size: .65em;
color: #FFF;
background-color: #00cc4f;
font-weight: 700;
width: 97px;
height: 18px;
padding-top: 3px;
margin-top: 5px;
padding-bottom: 4px;
text-align: center;
font-family: 'Open Sans', sans-serif;
cursor: help
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<table border="1">
<col style="width:128px;" />
<col style="width:216px;" />
<col style="width:280px;" />
<thead>
<tr>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p class="inline">Sample A</p><span class="help"><span class="fa fa-question-circle fa-lg help-icon"></span><div class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div></span>
<span class="help"><div class="box">SAMPLE BOX</div><div class="help-text">im ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.</div></span>
<div>aaa</div>
<div class="other">Sample B</div><span class="help"><span class="fa fa-question-circle fa-lg help-icon"></span><div class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.</div></span>
</td>
<td>
</td>
<td><ul>
<li class="inline">Another Sample: C
<span class="help">
<span class="fa fa-question-circle fa-lg help-icon"></span>
<div class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</span></li>
<li class="inline">Yet Another Great Sample - D:
<span class="help">
<span class="fa fa-question-circle fa-lg help-icon"></span>
<div class="help-text">r sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dol ssssssssssssssss</div>
</span></li>
</ul>
</td>
</tr>
</tbody>
</table>
Set .help-text inside .fa-question-circle. This way help text will be positioned relative to its parent element. Then you just have to change margin-left to -20px and you're done.
<div class="fa fa-question-circle fa-lg help-icon">
<span class="help-text">r sit amet, </span>
</div>
here's the working fiddle. first two tooltips are unchanged, the other two are fixed.
This seems to be what you want: https://jsfiddle.net/x02exd59/3/ .
First I made some HTML changes. Your absolute positioned element (the tooltip text) will display relative to its parent. This means that if we make the glyphicon its parent, it will display based on where the icon is.
Secondly I checked the CSS to make sure the glyphicon had position: relative; and the info-text had position: absolute;.
Thirdly I fine-tuned the placement of the info-text with the top: and left: values. (I also changed the position of the arrow element you created to left:25px.)
HTML
<table border="1">
<col style="width:128px;" />
<col style="width:216px;" />
<col style="width:280px;" />
<thead>
<tr>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p class="inline">Sample A</p><i class="help fa fa-question-circle fa-lg help-icon"><span class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</span></i>
<div class="help box">SAMPLE BOX<span class="help-text">im ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.</span></div>
<div>aaa</div>
<div class="other">Sample B<span class="help fa fa-question-circle fa-lg help-icon"><span class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.</span></span></div>
</td>
<td>
</td>
<td><ul>
<li class="inline">Another Sample: C</li>
<span class="help">
<span class="fa fa-question-circle fa-lg help-icon"></span>
<div class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</span>
<li class="inline">Yet Another Great Sample - D:</li>
<span class="help">
<span class="fa fa-question-circle fa-lg help-icon"></span>
<div class="help-text">r sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dol ssssssssssssssss</div>
</span>
</ul>
</td>
</tr>
</tbody>
</table>
CSS
.help {
position: relative
;
}
.help .help-text {
display: none;
background-color: #FDFCEF;
border: 1px solid #E8E5C1;
border-radius: 4px;
color: #333;
font-size: 12px;
font-weight: 400;
padding: 5px;
white-space: normal;
position: absolute;
left: 0px;
z-index: 1000;
box-shadow: 0 1px 3px 3px rgba(0, 0, 0, .05);
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
margin-left: -15px;
margin-top: 12px;
line-height: 1.2
}
.help .help-text:after,
.help .help-text:before {
bottom: 100%;
left: 50%;
left: 25px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none
}
.help .help-text:after {
border-color: transparent transparent #FDFCEF;
border-width: 8px;
margin-left: -8px
}
.help .help-text:before {
border-color: transition transition #E8E5C1;
border-width: 10px;
margin-left: -10px;
}
.help:hover .help-text {
display: block
}
.help-text {
width: 185px
}
.help-icon {
padding-left: 3px;
color: #789cbf;
font-size: .9em!important;
vertical-align: 0!important;
cursor: help
}
.other {
display: inline
}
p.inline {
display: inline-block
}
.inline {
display: inline-block
}
.box {
font-size: .65em;
color: #FFF;
background-color: #00cc4f;
font-weight: 700;
width: 97px;
height: 18px;
padding-top: 3px;
margin-top: 5px;
padding-bottom: 4px;
text-align: center;
font-family: 'Open Sans', sans-serif;
cursor: help
}
Is there a precise way to get the top and left sides of the paragraph flowing around the floated img to align. When I zoom in and use developer tools they are not perfectly aligned but very close.
http://codepen.io/BennyHH/pen/mPBEvG
* {
box-sizing: border-box;
}
.contain {
width: 500px;
margin: 0 auto;
background-color: silver;
}
.box {
width: 200px;
height: 100px;
background: blue;
float: left;
margin: 15px 15px 0;
}
p {
padding: 15px;
}
<section class="contain">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
</section>
It can work like that.
* {
box-sizing: border-box;
}
.contain {
width: 500px;
margin: 0 auto;
background-color: silver;
}
.box {
width: 200px;
height: 100px;
background: blue;
float: left;
margin: 15px 15px 0;
}
p {
padding: 15px;
width: calc(100% - 215px);
margin-left: 215px;
}
<section class="contain">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
</section>
just put overflow:hidden on <p> tag
* {
box-sizing: border-box;
}
.contain {
width: 500px;
margin: 0 auto;
background: silver;
}
.box {
width: 200px;
height: 100px;
background: blue;
float: left;
margin: 15px 15px 0;
}
p {
padding: 13px 15px;
overflow: hidden;
/* text-align: justify; */
}
<section class="contain">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</section>