I am trying to figure out why my parallax footer is only working correctly with display in css set to "inline-block". I can't use it with this property because I need margin collapse.
Here is my HTML
<main>
<div class="headline-big">
<h1>News</h1>
</div>
<div class="headline-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis dolores veniam reiciendis est voluptates eum nihil quae odio modi! Sequi maiores unde officiis eius debitis rem iure reprehenderit distinctio fugit.</p>
</div>
</main>
<footer>
This is the footer
</footer>
And here my CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
main {
background: #f6f6f6;
width: 100%;
position: relative;
z-index: 2;
margin-bottom: 600px;
/* WOULD WORK WITH inline-block, but can't use it, because I need margin-collapse */
/* display: inline-block; */
}
.headline-big,
.headline-content {
display: grid;
grid-template-columns: repeat(14, minmax(90px, 1fr));
margin: 130px 0;
}
.headline-big h1 {
font-size: 250px;
grid-column: 4 / 12;
}
.headline-content p {
grid-column: 4 / 12;
font-size: 20px;
display: block;
}
footer {
position: fixed;
bottom: 0;
background: #4f543e;
width: 100%;
height: 600px;
color: white;
text-align: center;
font-size: 25px;
}
What am I doing wrong? If you want to see it in action to "toggle" on/off the display property I prepared a codepen: https://codepen.io/codevelop-at/pen/yLqrrPw
Related
I'm new to front-end, and I've been struggling to keep the text on the Hero Image as it always go outside of the hero Image or Slider, I tried another way of adding Hero Image with CSS background-image property, but then I can't keep Hero Image responsive!
Kindly let me know the mistakes in the code, and help me understand how can I keep the text on the Hero Image, and make it responsive as well.
Here is the code of the Hero Section
.hero {
position: relative;
}
.hero img {
max-width: 100%;
}
.text_overlay .container {
max-width: 500px;
margin: 0 auto;
}
.text_overlay {
position: absolute;
top: 150px;
left: 100px;
}
.text_overlay h1 {
font-family: 'Roboto', sans-serif;
font-size: 60px;
color: white;
}
.text_overlay p {
color: white;
font-family: 'Roboto', sans-serif;
font-size: 16px;
}
/* Button */
.text_overlay a {
background-color: #31512a;
padding: 10px 20px;
display: inline-block;
margin-top: 20px;
border-radius: 4px;
}
.text_overlay a p {
color: white;
font-family: 'Roboto', sans-serif;
font-size: 16px;
text-transform: uppercase;
}
<section class="hero">
<img src="imgs/hero1.jpg" alt="">
<div class="text_overlay">
<div class="container">
<p>Welcome to Agriculture Farm</p>
<h1>Agriculture & Eco Farming</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
<a href="">
<p>More Info</p>
</a>
</div>
</div>
</section>
With the code provided this is how it looks on a desktop screen:
And this is how it looks on a responsive device:
First of all i used an image as a background-image inside your .hero container(section)
background-image: url("https://source.unsplash.com/random/1000x500");
Then i add Grid Property to .text-overlay container and create 2 columns
.text_overlay {
display: grid;
grid-template-columns: 40% 60%;
height: 100%;
}
First column width is 40% and the second width is 60% Your text container will be in 40% part.
You can also limit the width of the container using
.text_overlay .container {
padding: 6rem 1rem;
height: 100%;
min-width: 50rem;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html{
font-size: 62.5%;
}
body {
min-height: 100vh;
width: 100%;
}
img {
max-width: 100%;
display: block;
}
.hero {
height: 60%;
background-image: url("https://source.unsplash.com/random/1000x500");
background-size: cover;
}
.text_overlay {
display: grid;
grid-template-columns: 40% 60%;
height: 100%;
}
.text_overlay .container {
padding: 6rem 1rem;
height: 100%;
/* min-width: 50rem; */
}
.text_overlay .container > * {
margin-bottom: 1rem;
}
.text_overlay .container h1 {
font-family: "Roboto", sans-serif;
font-size: 7.5rem;
color: white;
}
.text_overlay p {
color: white;
font-family: "Roboto", sans-serif;
font-size: 2rem;
}
/* Button */
.text_overlay a {
background-color: #31512a;
padding: 0.25rem 3rem;
display: inline-block;
margin-top: 1rem;
border-radius: 4px;
}
.text_overlay a p {
color: white;
font-family: "Roboto", sans-serif;
font-size: 2rem;
text-transform: uppercase;
}
<section class="hero">
<div class="text_overlay">
<div class="container">
<p>Welcome to Agriculture Farm</p>
<h1>Agriculture & Eco Farming</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam
earum ratione illum, reiciendis consequatur harum hic, laboriosam
accusantium fuga numquam similique libero quia laborum eveniet
obcaecati eius ullam dolorem culpa quidem! Mollitia placeat
voluptates, nisi molestias dolorum accusantium voluptatum doloremque
eos vel impedit similique quo, quasi cum ea cumque at aut quos,
fugiat explicabo autem illo atque eaque? Iste
</p>
<p>More Info</p>
</div>
</div>
</section>
I'm trying to show message within a div with icon on the left.
Expected result is icon should always adjacent to text and together they need to be aligned at bottom-center of div.
I'm using :after pseudo element. Keeping position: absolute of icon didn't help since that needs manually adjusting the icon position relative to text.
Here is the CSS.
.parent{
font-weight: 500;
height: 65px;
text-align: center;
padding: 15px 0 10px;
margin: auto;
display: block;
width: 80%;
font-size: 12px;
overflow: hidden;
position: relative;
}
.parent > div {
float: none;
/* display: table-cell; */
vertical-align: middle;
position: absolute;
bottom: 0;
width: 100%;
}
.msg:after {
content: '';
background: url(data:image/...);
height: 16px;
width: 16px;
display: block;
position: absolute;
top: 0;
padding-right: 5px;
left: 108px;
}
And markup:
<div class="parent">
<div class="msg">text goes here</div>
</div>
Flexbox can do that:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
.parent {
font-weight: 500;
margin: auto;
padding: 1em;
width: 80%;
font-size: 12px;
overflow: hidden;
position: relative;
border: 1px solid red;
}
.msg {
display: flex;
}
.msg p {
padding-left: 1em;
}
.msg:before {
content: "";
height: 16px;
flex: 0 0 16px;
background: red;
border-radius: 100%;
}
<div class="parent">
<div class="msg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae numquam unde, eum sequi expedita fugiat ipsa exercitationem nesciunt libero repellendus aperiam excepturi, dolorem repudiandae eveniet alias perspiciatis, vero veniam tempora natus magnam
itaque quos. Nemo sit nisi, veniam mollitia fugit eaque reiciendis ex doloribus rem et suscipit debitis commodi sapiente.</p>
</div>
</div>
I'm not really sure how to word this question but I'll try.
So, I'm trying to get an overlay over the top of a background image, the header itself is taking up 100vh, but when I place the overlay with the image included, some padding from the nav is pushing the background colour down below the viewport it seems. I've tried to take margin off the nav elements and it brings the background up a little but not all the way. Maybe I'm missing something very simple here but I just can't seem to get my head around it.
Here's a link to the codepen (I know the code is a bit of a mess, it's just a test): https://codepen.io/Jmp93/pen/BMJwov
<nav id="main-nav">
<h3>TEST|Web</h3>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<header>
<h1>Test Text Sample</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt dolores, dolorum minima id beatae aperiam saepe
sapiente animi quas earum?</p>
</header>
<section id="start-section">
<div class="container">
<h1 class="m-heading">Some Text</h1>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta possimus dolore temporibus aut,
reiciendis voluptatum voluptate consequatur ducimus. Sunt minus nihil nulla in commodi. In officiis, harum amet
eos nesciunt illum rerum aliquam quasi modi natus quis laudantium qui quae?</p>
</div>
</section>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #333;
color: #fff;
margin: 0;
line-height: 1.5;
}
.m-heading {
font-size: 2rem;
margin-bottom: .75rem;
}
.lead {
font-size: 1.2rem;
}
header {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
height: 100vh;
text-align: center;
}
header:before {
content: '';
background: url('https://source.unsplash.com/1600x900/?nature,water') no-repeat center center/cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.2;
z-index: -1;
}
header h1 {
font-size: 4rem;
margin: 1rem;
}
#main-nav {
display: flex;
position: sticky;
top: 0;
left: 0;
justify-content: space-between;
}
#main-nav h3 {
font-size: 2rem;
margin: 2rem;
}
#main-nav ul {
display: flex;
justify-items: center;
font-size: 1.2rem;
margin: 2rem;
}
#main-nav ul li {
list-style: none;
}
#main-nav ul li a {
color: #fff;
text-decoration: none;
padding: 1rem;
}
#main-nav ul li a:hover {
background: #444;
border-radius: 25px;
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 2rem;
}
#start-section {
background: #fff;
color: #000;
text-align: center;
}
Any help would be appreciated, thanks.
Just try to apply a position relative to the header itself :) usually if you use a position absolute, the main element containing it should be relative. That is the correct way of making the absolute element be positioned at 100% of its parent's width and height and not floating without reference.
On my page the footer is right under the content, which makes perfect technical sense. However, since the content is short and doesn't fill the whole page, only half of it, this leaves the footer in the middle of the screen. I was wondering how to have the footer at the bottom of the page for whatever screen size it's viewed on. I know this can be done with padding to the body content, or margin on the footer, however I don't know if I could do that to adapt to every screen size. Any help would be appreciated!
CSS
footer {
background-color: #242424;
color: #fff;
margin-top: 50px;
padding-top: 20px;
padding-bottom: 5px;
}
.search_wrapper {
display: inline-flex;
margin-top: 50px;
}
.search_ins {
font-size: 25px;
border: 1px solid #a6a6a6;
border-radius: 25px 0px 0px 25px;
padding: 3.2px 30px;
outline: 0;
width: 600px;
height: 100px;
}
.search_ins:hover .search_ins:focus {
border-color: #a6a6a6;
}
.search_button {
font-size: 30px;
border: 1px solid #a6a6a6;
border-left: 0;
padding: 0 12px;
color: #fff;
outline: 0;
border-radius: 0px 25px 25px 0px;
background-color: #fff;
cursor: pointer;
}
Easiest way to do this is using the vh unit for height of your main content. Assuming a structure similar to the below...
<main>Your content</main>
<footer>Footer</footer>
Set a min-height on your main content that's equal to 100% of you window minus your footer height.
main { min-height: calc(100vh - 60px); }
footer { height: 60px; }
Bam! Footer's always at the bottom, and you don't have to worry about padding, margins, or absolute positioning!
You need to display the parent of the footer as a column flexbox (column is a must because you need the flex items to stack vertically not horizontally); then set the margin-top of the footer to auto.
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
body {
font-family: Arial, sans-serif;
}
.text-center {
text-align: center;
}
.page-wrapper {
min-height: 100%;
display: flex;
flex-direction: column;
}
main {
padding: 0 15px;
}
footer {
background-color: #242424;
color: #fff;
padding: 15px 0;
margin-top: auto;
}
<div class="page-wrapper">
<main id="main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, dicta. Aut aspernatur ratione, eligendi quis inventore tempore aliquid sequi architecto, natus id deserunt perferendis excepturi sint blanditiis, similique aperiam dicta.</p>
<p>Earum incidunt distinctio repellendus, sequi, voluptate sint aperiam necessitatibus ut, a ipsa officiis ab quasi, odio soluta quos amet praesentium? Nesciunt repudiandae maiores in vel nulla magni aperiam omnis placeat!</p>
</main>
<footer class="text-center">Lorem ipsum dolor</footer>
</div>
I have a container that is keeping the content to a max-width of 1200px and want to have a main image that is placed as the background of the .main_prize_section and can expand on bigger screens while staying within the proper aspect ratio. the main wrapper image is like a container for the main content, so it cant appear distorted.
here is the html code
<section class="main_prize_section">
<div class="container">
<div>
<div class="row">
<div class="flex_row">
<div class="col_1_2">
<div>
<h1>TEST HEADER</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos quae quo fugit asperiores, aperiam perspiciatis dolores consectetur quam nemo, laudantium et doloribus officia voluptates eveniet optio ad ab quaerat natus!</p>
</div>
<div>
<h2>sub header</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti accusantium molestiae id a quae pariatur? Sequi ipsum quos libero aspernatur tempore molestiae facere, porro, autem perferendis, atque aut earum reiciendis.</p>
</div>
</div>
<div class="col_1_2 main_prize_product"><img src="images/english/prize_images.png" alt="" width="100%"/></div>
</div>
</div>
</div>
</div>
</section>
here is the css code
.container {
max-width: 1200px;
margin: 0 auto;
}
.flex_col {
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
flex-direction: column;
display: -webkit-flex;
display: -moz-box;
display: flex;
}
.flex_row {
display: -webkit-flex;
display: -moz-box;
display: flex;
}
.col_1_2 {
width: 50%;
}
.main_prize_section {
text-align: center;
background: url("../images/prize_background.png");
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
background-position: 50% 50%;
text-align: center;
}
.main_prize_section img {
width: 50%;
margin: 0 auto;
}
.main_prize_section .flex_row {
padding: 2%;
}
.main_prize_section h1 {
color: pink;
font-size: 4rem;
font-weight: 700;
}
.main_prize_section h2 {
color: pink;
font-size: 2.5rem;
font-weight: 700;
}
.main_prize_section .col_1_2 div:nth-child(2) {
padding: 2%;
}
.main_prize_section p:nth-child(2) {
padding: 2%;
}
.main_prize_section p span:nth-child(1) {
color: gold;
}
.main_prize_section p span:nth-child(2) {
color: pink;
}
.main_prize_section p span:nth-child(3) {
color: red;
}
.main_prize_section p span:nth-child(4) {
color: blue;
}
the main wrapper image that bleeds out is 1366x800.
See if this helps you: https://codepen.io/panchroma/pen/jxxoqO
The important bit is the CSS lines 36 - 39
.main_prize_section {
...
background:url("../images/prize_background.png");
background-repeat: no-repeat;
background-size:cover; /* could also be background-size:contain; */
background-position:50% 50%; /* adjust to fit your design and the image */
}
For the background size, use either 'cover' or 'contain', and in combination with the background-position values, find a combination of settings that work for your specific design and image.
Good luck!