the h1 in the showcase area is getting on top of each other when i am trying to squeeze the window which is not supposed to behave in that way.But when it is not,, everything is fine. As i am new in this sector, i am not understanding what i've done wrong. Could anyone please show me where it needs to be fixed?
html:
body {
margin: 0;
padding: 0;
background: #f4f4f4;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.6em;
}
/* GLOBAL */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
padding: 0;
margin: 0;
}
/* HEADER */
header {
background-color: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 17px;
}
header li {
float: left;
display: inline;
padding: 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight,
header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
/*Showcase*/
#showcase {
min-height: 400px;
background: url('../images/showcase.jpg') no-repeat 0 -400px;
text-align: center;
color: #fff;
}
#showcase h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#showcase p {
font-size: 17px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ACME Web Design</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">Acme</span> Web Design</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, dolor, explicabo voluptas quibusdam dolore omnis maiores quidem necessitatibus nulla, iure ullam asperiores illum. Aliquid fuga magnam labore error vitae laborum.</p>
</div>
</section>
<section id="newsletter">
<div class="container">
<h1>Subscribe To Our Newsletter</h1>
<form action="">
<input type="email" name="email" id="" placeholder="Enter Email">
<button type="submit" class="button_1">Submit</button>
</form>
</div>
</section>
<section id="boxes">
<div class="container">
<div class="box">
<img src="images/logo_html.png" alt="">
<h1>HTML 5 Markup</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
</div>
<div class="box">
<img src="images/logo_css.png" alt="">
<h1>CSS 3 Styling</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
</div>
<div class="box">
<img src="images/logo_brush.png" alt="">
<h1>Graphic Design</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
</div>
</div>
</section>
<footer>
<p>ACME Web Design, Copyright © 2019</p>
</footer>
</body>
</html>
You have a few options here:
If you want to allow the title to stack for smaller screens you will need to make a small change to your css. I noticed that you have the following line in your css:
line-height: 1.6em;
Try changing this to
line-height:1.6;
Unitless line heights are typically recommended for use because this will allow the child elements to compute their line heights based on the font size specified.
Try reading the information here for more in-depth explanation
If you would like for the text to remain on one line when resizing the screen you can use media queries to change the font-size:
Based on your code I noticed that the font begins to stack at 1204px so try adding this:
#media screen and (max-width: 1204px) {
#showcase h1 {
font-size: 45px;
}
}
And then from here you can continue on to test the size of the screen and then add more breakpoints based on where the font begins to stack.
Personally I would add the style line-height: 55px; to the #showcase h1 element, so the height of the text is the same as the size of it.
This is going to be the final result:
body {
margin: 0;
padding: 0;
background: #f4f4f4;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.6em;
}
/* GLOBAL */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
padding: 0;
margin: 0;
}
/* HEADER */
header {
background-color: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 17px;
}
header li {
float: left;
display: inline;
padding: 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight,
header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
/*Showcase*/
#showcase {
min-height: 400px;
background: url('../images/showcase.jpg') no-repeat 0 -400px;
text-align: center;
color: #fff;
}
#showcase h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
line-height: 55px;
}
#showcase p {
font-size: 17px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ACME Web Design</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">Acme</span> Web Design</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, dolor, explicabo voluptas quibusdam dolore omnis maiores quidem necessitatibus nulla, iure ullam asperiores illum. Aliquid fuga magnam labore error vitae laborum.</p>
</div>
</section>
<section id="newsletter">
<div class="container">
<h1>Subscribe To Our Newsletter</h1>
<form action="">
<input type="email" name="email" id="" placeholder="Enter Email">
<button type="submit" class="button_1">Submit</button>
</form>
</div>
</section>
<section id="boxes">
<div class="container">
<div class="box">
<img src="images/logo_html.png" alt="">
<h1>HTML 5 Markup</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
</div>
<div class="box">
<img src="images/logo_css.png" alt="">
<h1>CSS 3 Styling</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
</div>
<div class="box">
<img src="images/logo_brush.png" alt="">
<h1>Graphic Design</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
</div>
</div>
</section>
<footer>
<p>ACME Web Design, Copyright © 2019</p>
</footer>
</body>
</html>
Hope this helps.
Related
I have created a sample page with a fixed background. I want the page to lighten up as the page is scrolled down.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5)), url(https://plus.unsplash.com/premium_photo-1673491310188-f14100075189?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80);
background-attachment: fixed;
}
.content {
padding: 10px;
}
.navbar {
background-color: white;
float: right;
padding: 10px;
margin: 10px;
position: sticky;
top: 0;
border-radius: 10px;
}
.paras {
margin: 20px;
}
.message {
background-color: white;
float: right;
padding: 10px;
margin: 10px;
position: sticky;
bottom: 0;
border-radius: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>SkyLine</title>
</head>
<body>
<div class="content">
<div class="navbar">
Home
</div>
<div class="navbar">
Contact Us
</div>
<div class="navbar">
About Us
</div>
<div class="paras">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
</div>
<div class="message">
Send a message
</div>
</div>
</body>
</html>
Instead, in my current code, the top of the screen is dark and the bottom is light. It doesn't get lighter as the page is scrolled down.
I want to achieve this effect:
https://www.wix.com/website-template/view/html/1896?originUrl=https%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates&tpClick=view_button&esi=c5ca042c-26c4-41cb-bc5f-01e47031976d
Your mistake is that you did a gradient from black to white, while you actually need a gradient from fully transparent white to almost opaque white to lighten your content.
In the snippet below, I changed the body linear-gradient to achieve the expected result :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/*Removed linear gradient from this background-image or else the gradient wouldn't 'lighten' the content on scroll */
background-image: url(https://plus.unsplash.com/premium_photo-1673491310188-f14100075189?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80);
background-attachment: fixed;
}
.content {
/* Added linear-gradient */
background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8015405991498161) 40%, rgba(255,255,255,0.8) 100%);
padding: 10px;
}
.navbar {
background-color: white;
float: right;
padding: 10px;
margin: 10px;
position: sticky;
top: 0;
right: 10px;
border-radius: 10px;
}
.paras {
margin: 20px;
}
.message {
display: inline-block; /* Changed display property to avoid the element having full width */
background-color: white;
/* float: right; Removed so it doesn't break the content display */
padding: 10px;
margin: 10px;
position: sticky;
bottom: 0;
border-radius: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>SkyLine</title>
</head>
<body>
<div class="content">
<div class="navbar">
Home
</div>
<div class="navbar">
Contact Us
</div>
<div class="navbar">
About Us
</div>
<div class="paras">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
</div>
<div class="message">
Send a message
</div>
</div>
</body>
</html>
I'm new to css I created this footer, I have one problem here.
when I try to shrink it the tables disappear and bypass the screen borber and I want it to stay within the screen desired size, would love to know what I did wrong, Thank you.
note: I'm not trying to make it responsive yet I just want to be able to see all the content inside the screen borber.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>footer trial</title>
</head>
<body>
<footer>
<div class="footer">
<div class="table1 tables">
<h2 class="table-title">ABOUT</h2>
<p class="about">Lorem ipsum dolor sit amet consectetur adipisicing elit.<br> Odit impedit molestiae amet ab maxime saepe qui est<br>, temporibus voluptatibus eaque nihil, ut, omnis sit fugiat cupiditate explicabo. Repellat totam nisi incidunt.<br> Nulla nisi officiis ex, facilis delectus modi, dolor numquam consequuntur aspernatur,<br> harum autem perferendis iure ab! Praesentium, ea corrupti!</p>
</div>
<ul>
<div class="table2 tables">
<h2 class="table-title">INFORMATION</h2>
<nav class="table-links">
<li>table-link1</li>
<li>table-link2</li>
<li>table-link3</li>
</nav>
</div>
<div class="table3 tables">
<h2 class="table-title">CATALOGS</h2>
<nav class="table-links">
<li>table-link1</li>
<li>table-link2</li>
<li>table-link3</li>
</nav>
</div>
<div class="table4 tables">
<h2 class="table-title">SITEMAP</h2>
<nav class="table-links">
<li>table-link1</li>
<li>table-link2</li>
<li>table-link3</li>
</nav>
</div>
<div class="table5 tables">
<h2 class="table-title">CONTACT</h2>
<p class="about">Lorem ipsum dolor sit amet consectetur adipisicing elit.<br> Odit impedit molestiae amet ab maxime saepe qui est<br>, temporibus voluptatibus eaque nihil, ut, omnis sit fugiat cupiditate explicabo. Repellat totam nisi incidunt.<br> Nulla nisi officiis ex, facilis delectus modi, dolor numquam consequuntur aspernatur,<br> harum autem perferendis iure ab! Praesentium, ea corrupti!</p>
</div>
</ul>
</div>
</footer>
<div>
all rights reserved 2022
</div>
</body>
</html>
CSS :
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
text-decoration: none;
list-style: none;
}
body {
position: fixed;
width: 100%;
left: 0px;
bottom: 0px;
}
.footer {
background-color: rgb(4, 97, 97);
color: #fff;
gap: 15rem;
padding: 20px;
width: 100%;
display: flex;
justify-content:flex-start;
margin-left: auto;
margin-right: auto;
}
ul {
gap: 7rem;
display: flex;
justify-content:space-evenly;
}
.about {
width: 400px;
text-align: justify;
margin-left: auto;
}
.table1 {
margin-left: 5rem;
margin-bottom: 2rem;
}
.table-title {
color: rgb(4, 224, 151);
line-height: 3rem;
margin-bottom: 1rem;
}
.table-links {
text-align: center;
line-height: 2rem;
font-weight: 400;
}
.table-link {
color: #fff;
text-align: center;
}
.copyright {
background-color: rgb(5, 120, 124);
color: #fff;
padding: 10px;
width: 100%;
display: flex;
justify-content:center;
word-spacing: 0.24rem;
}
Try this if it solve your problem, let me know if anything needed:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
text-decoration: none;
list-style: none;
}
body {
position: fixed;
width: 100%;
left: 0px;
bottom: 0px;
}
.footer {
background-color: rgb(4, 97, 97);
color: #fff;
padding: 20px;
display: flex;
justify-content: space-between;
}
.about {
width: 400px;
text-align: justify;
margin-left: auto;
}
.table1 {
margin-left: 5rem;
margin-bottom: 2rem;
}
.table-title {
color: rgb(4, 224, 151);
line-height: 3rem;
margin-bottom: 1rem;
}
.table-links {
text-align: center;
line-height: 2rem;
font-weight: 400;
}
.table-link {
color: #fff;
text-align: center;
}
.copyright {
background-color: rgb(5, 120, 124);
color: #fff;
padding: 10px;
width: 100%;
display: flex;
justify-content: center;
word-spacing: 0.24rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>footer trial</title>
</head>
<body>
<footer>
<div class="footer">
<div class="table1 tables">
<h2 class="table-title">ABOUT</h2>
<p class="about">
Lorem ipsum dolor sit amet consectetur adipisicing elit. <br> Odit impedit molestiae amet ab maxime
saepe qui est <br>, temporibus voluptatibus eaque nihil, ut, omnis sit fugiat cupiditate explicabo.
Repellat totam nisi incidunt.<br> Nulla nisi officiis ex, facilis delectusmodi, dolor numquam
consequuntur aspernatur,<br> harum autem perferendis iure ab! Praesentium, eacorrupti!
</p>
</div>
<div class="table2 tables">
<h2 class="table-title">INFORMATION</h2>
<nav class="table-links">
<li>table-link1</li>
<li>table-link2</li>
<li>table-link3</li>
</nav>
</div>
<div class="table3 tables">
<h2 class="table-title">CATALOGS</h2>
<nav class="table-links">
<li>table-link1</li>
<li>table-link2</li>
<li>table-link3</li>
</nav>
</div>
<div class="table4 tables">
<h2 class="table-title">SITEMAP</h2>
<nav class="table-links">
<li>table-link1</li>
<li>table-link2</li>
<li>table-link3</li>
</nav>
</div>
<div class="table5 tables">
<h2 class="table-title">CONTACT</h2>
<p class="about">Lorem ipsum dolor sit amet consectetur adipisicing elit.<br> Odit impedit molestiae
amet ab maxime saepe qui est<br>, temporibus voluptatibus eaque nihil, ut, omnis sit fugiat
cupiditate explicabo. Repellat totam nisi incidunt.<br> Nulla nisi officiis ex, facilis delectus
modi, dolor numquam consequuntur aspernatur,<br> harum autem perferendis iure ab! Praesentium,
ea corrupti!</p>
</div>
</div>
</footer>
<div>
all rights reserved 2022
</div>
</body>
</html>
Given I have 2 relevant divs with a text content (each) inside a flexbox container
When the content is longer than my screen
Then I should see the width and height of both divs are balanced to consume maximum space
Here is an example where I have 2nd and 3rd div relevant. Both have some text content.
For this example I found manually flex-grow numbers for both divs to do the balance.
Question: Is it possible to do such balance using only CSS or the certain calculation should be done in JavaScript?
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
background-color: #333;
height: 100%;
margin: 0;
}
.flex-container {
counter-reset: item;
position: relative;
padding: 20px;
width: 100%;
display: flex;
flex-flow: wrap;
}
.cell {
position: relative;
font-size: 25px;
padding: 1rem;
background-color: #379AD6;
color: #222;
box-shadow:0 0 0 1px white;
}
.cell:nth-child(odd) {
background-color: #5bbdfa;
}
.cell::before {
counter-increment: item;
content: 'Grid Item ' counter(item) ' ';
font-size: 25px;
font-weight: bold;
}
.flex-container .cell {
flex: 1 1 auto;
}
.flex-container .cell:first-child {
flex: 1 0 100%;
}
.flex-container .cell:nth-child(2) {
flex: 34 1;
}
.flex-container .cell:nth-child(3) {
flex: 16 1;
}
.flex-container .line-break{
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="flex-container">
<div class="cell"></div>
<div class="cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid beatae cupiditate doloribus eaque enim et excepturi expedita fuga, minima minus neque nihil non, obcaecati officia quidem quisquam quo repellat repudiandae sapiente sunt ullam ut voluptas. Ab iste nemo numquam, quos ratione recusandae sunt! Cum ex magnam officia quia voluptatum. Reprehenderit?</div>
<div class="cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores cum cumque dolorem, error ex facere magni minima quaerat voluptas voluptates?</div>
<div class="line-break"></div>
<div class="cell"></div>
<div class="cell">End</div>
</div>
</body>
</html>
I'm using display: flex to create panels for my upgrade items. The code looks something like this, I tried to re-create it as best as I could: fidle
. Now I don't understand why are the images overlapping into the tooltip (hover over elements for tooltip to appear). This is very strange, I thought it was because of display: flex, so I tried doing the same thing using grid, no luck. The tooltip has to be position: absolute, especially because I'm planning on adding some javascript so the tooltip box follows the cursor. What is causing this kind of behavior? I'm thinking there's something to do with flexbox/grid and absolute positioning, but I'm not very good at css
Add a z-index value to the .tooltip class.
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
p
{
font-size: 24px;
line-height: normal;
}
img
{
border: 1px solid grey;
vertical-align: middle;
}
/* Upgrade wrapper & body */
#upgrades {
height:100%;
box-shadow:0 0 16px 4px rgb(0, 0, 0);
}
.upgrade {
display: flex;
width: 320px;
height: auto;
margin: 1em;
position: relative;
box-shadow: 0 0 8px 2px rgb(0, 0, 0);
}
.upgrade-img {
width: 64px;
height: 64px;
}
.upgrade-body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-basis: 100%;
padding: 0.5em;
}
/* Upgrade Hover Effects */
.upgrade:hover {box-shadow: 0 0 8px 2px rgb(0, 204, 255);}
.upgrade:hover .tooltip {display: initial;}
/* Tooltip */
.tooltip {
display: none;
width: 256px;
height: auto;
padding: 1em;
position: absolute;
top: 64px;
left: 0;
z-index: 100; /* <------- ADDED Z-INDEX */
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
box-shadow: 0 0 4px 1px rgb(0, 0, 0);
}
<div class="upgrade">
<div class="upgrade-img">
<img src="https://source.unsplash.com/random/64x64">
<div class="tooltip">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ea sequi recusandae commodi necessitatibus voluptatum, labore libero quasi quos veniam eveniet laborum aspernatur harum iusto, provident itaque hic laboriosam unde!
</div>
</div>
<div class="upgrade-body">
<p>
<img src="https://source.unsplash.com/random/24x24">
100 (dmg)
</p>
<p>
<img src="https://source.unsplash.com/random/24x24">
500 (cost)
</p>
</div>
</div><div class="upgrade">
<div class="image">
<img src="https://source.unsplash.com/random/64x64">
<div class="tooltip">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ea sequi recusandae commodi necessitatibus voluptatum, labore libero quasi quos veniam eveniet laborum aspernatur harum iusto, provident itaque hic laboriosam unde!
</div>
</div>
<div class="body">
<p>
<img src="https://source.unsplash.com/random/24x24">
100 (dmg)
</p>
<p>
<img src="https://source.unsplash.com/random/24x24">
500 (cost)
</p>
</div>
</div><div class="upgrade">
<div class="image">
<img src="https://source.unsplash.com/random/64x64">
<div class="tooltip">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ea sequi recusandae commodi necessitatibus voluptatum, labore libero quasi quos veniam eveniet laborum aspernatur harum iusto, provident itaque hic laboriosam unde!
</div>
</div>
<div class="body">
<p>
<img src="https://source.unsplash.com/random/24x24">
100 (dmg)
</p>
<p>
<img src="https://source.unsplash.com/random/24x24">
500 (cost)
</p>
</div>
</div>
I'm building a layout for a clients custom cms system, all the content is built in bootstrap rows which gets printed in a container. The client wanted to be able to make colored rows, i managed this with pseudo elements like this:
.full-row:before {
position: absolute;
top: 0;
left: 50%;
display: block;
width: 100vw;
height: 100%;
background-color: inherit;
content: '';
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
I wanted to take the same approach to make the client able to make parallax rows as well, but I can't get the background image to fill the entire width of the row, or can't seem to position it the right way.
I have made a codepen to see an example where the colored rows work but the parallax effect sucks. Any suggestions on how to fix this?
Here's the code pen
One solution would be to use left: -9999px; right: -9999px; instead of width but by using this method image will stretch. the problem with you HTML structure is you used .row with in container and use position:relative; on it. If you take row out of container your current code will work fine
h3 {
text-transform: uppercase;
color: #fff;
}
header {
padding-top: 80px;
width: 100%;
height: 50vh;
color: #fff;
background-position: center;
background-image: url(http://i68.tinypic.com/2upfuk2.jpg);
background-size: cover;
}
header h1 {
text-transform: uppercase;
}
header .sub-headline {
font-size: 20px;
font-family: cursive;
}
.big-ass-icons {
text-align: center;
}
.big-ass-icons .fa {
font-size: 30px;
}
.big-ass-icons p {
display: block;
margin: 0 auto;
width: 80%;
}
.dummie-col {
height: 800px;
}
/* Helper classes */
.mar-b-30 {
margin-bottom: 30px;
}
.mar-b-40 {
margin-bottom: 40px;
}
.mar-b-50 {
margin-bottom: 50px;
}
.mar-b-60 {
margin-bottom: 60px;
}
.mar-b-70 {
margin-bottom: 70px;
}
.pad-30 {
padding: 30px 0;
}
.pad-40 {
padding: 40px 0;
}
.pad-50 {
padding: 50px 0;
}
.pad-60 {
padding: 60px 0;
}
.pad-70 {
padding: 70px 0;
}
.bg-gray {
background-color: #f9f9f3;
}
/* Row handeling */
.full-row,
.parallax-row {
position: relative;
}
.full-row:before {
position: absolute;
top: 0;
left: 50%;
display: block;
width: 100vw;
height: 100%;
background-color: inherit;
content: '';
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.parallax-row:before {
position: absolute;
top: 0;
bottom: 0;
left: -9999px;
right: -9999px;
display: block !important;
min-height: 100%;
background-color: rgba(0, 0, 0, .7);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
content: '';
}
/* More images to be added */
.image1:before {
background-image: url(http://i68.tinypic.com/2z5m1hh.png);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<header class="mar-b-50">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Big A** Image</h1>
<div class="sub-headline">How interesting</div>
</div>
</div>
</div>
</header>
<section class="container">
<div class="row big-ass-icons mar-b-40">
<div class="col-sm-4">
<span class="fa fa-pencil"></span>
<h4>Highly editable</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-sm-4">
<span class="fa fa-pencil"></span>
<h4>Highly editable</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-sm-4">
<span class="fa fa-pencil"></span>
<h4>Highly editable</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="row bg-gray full-row pad-40">
<div class="col-xs-12">
<h2>This is a colored row</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt at quos tenetur assumenda laudantium voluptatum laboriosam placeat rem earum, recusandae similique, et vero, doloremque possimus, fugit aliquam magni nulla! Sunt?</p>
</div>
</div>
<div class="row pad-30">
<div class="col-xs-12 text-center">
<h2>This is just a white row</h2>
<p>But it have two columns!</p>
</div>
<div class="col-sm-6">
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis illo sequi consectetur neque dignissimos animi eligendi, ab soluta laudantium minus autem non dolorem ut sint necessitatibus possimus sapiente pariatur voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod dolores perspiciatis doloribus voluptatem libero itaque, sapiente veniam error, autem, aliquid voluptatibus optio dolorum eaque eos quis facere voluptatum sed provident!</p>
</div>
<div class="col-sm-6">
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis illo sequi consectetur neque dignissimos animi eligendi, ab soluta laudantium minus autem non dolorem ut sint necessitatibus possimus sapiente pariatur voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod dolores perspiciatis doloribus voluptatem libero itaque, sapiente veniam error, autem, aliquid voluptatibus optio dolorum eaque eos quis facere voluptatum sed provident!</p>
</div>
</div>
<div class="row parallax-row image1 pad-70">
<div class="col-xs-12 text-center">
<h3>Wuhuuuu, awesome parallax!</h3>
</div>
</div>
<div class="row">
<div class="col-xs-12 dummie-col">
<h2>This is just to make the page long, for the parallax effect</h2>
</div>
</div>
</section>
Maybe a dick move, but im going to answer my own question.
The problem was the background-position units. I used vw to make the size so the positioning should be in the same units.
I added:
background-position: 50vw 0;
I also updated the pen