I have question. I am using materialize CSS. And I tried parallax with the html
<img class="parallax"> tag but is there a way to give you're background image in CSS but also making it parallax.
My Example code:
Content html:
<div class="row parallax-container">
<div class="parallax">
<div class="intro headerBackground">
<h1 class="grey-text text-lighten-5">Data</h1>
<h5 class="grey lighten-4 grey-text text-darken-1">Data</h5>
</div>
</div>
</div>
Content CSS:
.intro
{
text-align: center;
padding-top: 13%;
padding-bottom: 13%;
margin-bottom: 50px;
}
.intro h1
{
font-weight: 900;
text-transform: uppercase;
}
.intro h5
{
text-transform: uppercase;
background-color: #fafafa;
padding: 10px;
display: inline-block;
font-size: 1.2rem;
}
.headerBackground{
height:800px;
background-image:url('images');
background-repeat:no-repeat;
background-position:center;
background-size: cover;
}
Please Try:-
<div class="row parallax-container">
<div class="parallax headerBackground">
<div class="intro">
<h1 class="grey-text text-lighten-5">Data</h1>
<h5 class="grey lighten-4 grey-text text-darken-1">Data</h5>
</div>
</div>
Related
The <p> tag won't center align properly and I am not sure why. Please can you check my code and see where I am going wrong.
You can see in the picture that the alignment is slightly off.
The CSS added is what I think related to the section. I did not code the below, just trying to edit.
#hero-area2 .contents {
padding: 200px 0 130px;
}
#hero-area2 .contents h1 {
color: rgb(38, 211, 125);
font-size: 42px;
font-weight: 700;
margin-bottom: 25px;
}
#hero-area2 .contents p {
font-size: 14px;
color: rgb(38, 211, 125);
font-weight: 400;
line-height: 30px;
letter-spacing: 0.5px;
text-align: center;
}
#hero-area2 .contents .btn {
margin: 25px 25px 0px 0px;
text-transform: uppercase;
}
<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-10">
<div class="contents text-center">
<h1 class="wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="0.3s">Kuvumela Amandla</h1>
<p class="lead wow fadeIn" data-wow-duration="1000ms" data-wow-delay="400ms">Our Service Offering</p>
<a href="contact.html" class="btn btn-common wow fadeInUp" data-wow-duration="1000ms"
data-wow-delay="400ms">CONTACT US</a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-10">
<div class="contents text-center">
<h1 class="wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="0.3s">Kuvumela Amandla</h1>
<p class="lead wow fadeIn" data-wow-duration="1000ms" data-wow-delay="400ms">Our Service Offering</p>
CONTACT US
</div>
</div>
</div>
</div>
I think, there is no problem in p tag .I guess ,you are using bootstrap and you took a column .col-md-10.And the column doesn't exits center. USE .col-md-10.offset-md-1 I think, it will work
i didnt understand ur problem but i tried such css code :
display: grid
align-items: center
justify-content: center
background-color: blue
height: 100px
width: 200px
sorry iv learned css since 1 month only
#hero-area2 .contents {
padding: 200px 0 130px;
}
#hero-area2 .contents h1 {
color: rgb(38, 211, 125);
font-size: 42px;
font-weight: 700;
margin-bottom: 25px;
}
#hero-area2 .contents p {
font-size: 14px;
color: rgb(38, 211, 125);
font-weight: 400;
line-height: 30px;
letter-spacing: 0.5px;
text-align: center;
}
.kon{
text-align: center;
}
#hero-area2 .contents .btn {
margin: 25px 25px 0px 0px;
text-transform: uppercase;
}
<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-10">
<div class="contents text-center">
<h1 class="wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="0.3s">Kuvumela Amandla</h1>
<p class="kon" data-wow-duration="1000ms" data-wow-delay="400ms">Our Service Offering</p>
<a href="contact.html" class="btn btn-common wow fadeInUp" data-wow-duration="1000ms"
data-wow-delay="400ms">CONTACT US</a>
</div>
</div>
</div>
</div>
Here's my best guess to fix your problem
I can't say for certain if this is your issue, but <p> tags often have some extra padding added to them which may result in a wonky placement on your web page.
Try removing the padding using css:
p {
padding: 0
}
or try adding inline styles to your p element:
<p style='padding: 0'>
EDIT:
Another idea is that the className lead might be adding padding to the "leading edge" of the p element. Try removing that className from the <p> element, like so:
Before
<p class="lead wow fadeIn"
After
<p class="wow fadeIn"
Basically, I want half the screen to be my image and the other half to have my text. But if the screen is very small, I want the text to go over the image and the image and text shrink. So far I have the big screen working, but when I go into small screen the text is still huge (making it go off the screen) and is still to the right of the image.
.html:
<div class="container-fluid">
<div class="row">
<div class="col-xs-9 col-md-6">
<img class="img-responsive" src="styles/pics/brainimg.png" alt="Brain Image" width="960" height="819">
</div>
<div class="col-xs-3 col-md-6">
<div class="first">
NAME HERE
</div>
<div class="second">
DEVELOPER
</div>
</div>
</div>
</div>
.css
.first{
font-family: Cinzel;
color: black;
font-size: 45px;
font-weight: normal;
}
.second{
font-family: Cinzel;
color: black;
font-size: 20px;
font-weight: normal;
}
It's tricky to answer as you haven't specified what you mean by "too small" or how big your current image is. The smallest device is probably an old iPhone (320px). The following works for 320px but not below as the margin-left here is in pixels (percentage would be ideal). There is a jsbin here
.first {
font-family: Cinzel;
color: black;
font-size: 45px;
font-weight: normal;
}
.second {
font-family: Cinzel;
color: black;
font-size: 20px;
font-weight: normal;
}
#media screen and (max-width:320px) {
.first {
font-size: 16px;
text-align: center;
vertical-align: middle;
left: 0!important;
margin-left: -300px;
color: white;
}
.second {
font-size: 10px;
text-align: center;
vertical-align: middle;
margin-left: -300px;
color: white;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-xs-9 col-md-6">
<img class="img-responsive" src="http://s3.amazonaws.com/digitaltrends-uploads-prod/2014/06/Brain.jpg" alt="Brain Image" width="960" height="819">
</div>
<div class="col-xs-3 col-md-6">
<div class="first">
NAME HERE
</div>
<div class="second">
DEVELOPER
</div>
</div>
</div>
</div>
You could use media queries to get text over the image. Override position attribute as it is shown here How to position text over an image in css
Also, there is no need to use col-xs-9 and col-xs-3. You can use col-xs-12. Atleast col-xs-3 is not needed (col-xs-9 is a choice).
Something similar to this (not tested):
<div class="container-fluid cntr">
<div class="row">
<div class="col-xs-12 col-md-6 image1">
<img class="img-responsive" src="styles/pics/brainimg.png" alt="Brain Image" width="960" height="819">
</div>
<div class="col-xs-12 col-md-6 text1">
<div class="first">
NAME HERE
</div>
<div class="second">
DEVELOPER
</div>
</div>
</div>
</div>
#media screen and (max-width: 767px) {
.cntr {
position: relative;
}
.image1 {
position: absolute;
left: 0;
top: 0;
}
.text1 {
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
}
}
I have a have blocks that I would like to be inline and then have the same height no matter how much text is going to be in the boxes. The amount of text could vary at any point. I have the blocks inline but the height I can not figure out how to have the same height for all of them.
HTML:
<div class="article_block">
<div class="article_block_content">
<div class="article_block_content_left">
<img class="article_image" alt="<%= headline %>" title="<%= headline %>" src="<%= media_path %>"/>
</div>
<div class="article_block_content_right">
<h5 class="article-tag"><%= category.name %></h5>
<h2 class="article-title"><%= headline %></h2>
<h4 class="article-subtitle">This is the future home of the article headline. I hope this makes you want to read the article.</h4>
</div>
</div>
</div>
CSS:
.article_block {
width: 33%;
display: inline-flex;
.article_block_content{
margin: 10px;
height: inherit;
.article_block_content_left {
}
.article_block_content_right {
padding: 20px;
.article-tag {
text-align: center;
color: #7d8a8f;
text-transform: capitalize;
font-size: 14px;
font-family: 'Open Sans';
padding-top: 15px;
}
.article-title {
text-align: center;
font-family: 'Merriweather';
color: #333;
}
.article-subtitle {
text-align: center;
font-family: 'Merriweather';
font-style: italic;
color: #464849
}
}
}
}
This is currently what is happening
Set display: flex on the parent of your .article-block divs. This will keep the three .article-block divs to be the same height (because align-items default is stretch).
* { box-sizing: border-box; }
.article-block-wrap {
display: flex;
margin: 0 -10px;
}
.article_block {
padding: 5px;
display: flex;
flex: 0 0 33.333%;
overflow: hidden;
}
.article_block_content{
background: rgba(0,0,0,0.2);
}
.article_block_content_left {
text-align: center;
}
.article_block_content_right {
padding: 20px;
}
.article-tag {
text-align: center;
color: #7d8a8f;
text-transform: capitalize;
font-size: 14px;
font-family: 'Open Sans';
padding-top: 15px;
}
.article-title {
text-align: center;
font-family: 'Merriweather';
color: #333;
}
.article-subtitle {
text-align: center;
font-family: 'Merriweather';
font-style: italic;
color: #464849
}
<div class="article-block-wrap">
<div class="article_block">
<div class="article_block_content">
<div class="article_block_content_left">
<img class="article_image" src="https://placekitten.com/150/275"/>
</div>
<div class="article_block_content_right">
<h5 class="article-tag">Category Name</h5>
<h2 class="article-title">This is a long headline</h2>
<h4 class="article-subtitle">This is the future home of the article headline. I hope this makes you want to read the article.</h4>
</div>
</div>
</div>
<div class="article_block">
<div class="article_block_content">
<div class="article_block_content_left">
<img class="article_image" src="https://placekitten.com/150/300"/>
</div>
<div class="article_block_content_right">
<h5 class="article-tag">Category Name</h5>
<h2 class="article-title">This is a much longer headline than either the first or third block</h2>
<h4 class="article-subtitle">This is the future home of the article headline. I hope this makes you want to read the article.</h4>
</div>
</div>
</div>
<div class="article_block">
<div class="article_block_content">
<div class="article_block_content_left">
<img class="article_image" src="https://placekitten.com/150/250"/>
</div>
<div class="article_block_content_right">
<h5 class="article-tag">Category Name</h5>
<h2 class="article-title">This is a slightly longer headline</h2>
<h4 class="article-subtitle">
This is the future home of the article headline. I hope this makes you want to read the article.
This is the future home of the article headline. I hope this makes you want to read the article.
</h4>
</div>
</div>
</div>
</div><!-- .article-block-wrap -->
I apologize in advance for this somewhat lengthy explanation. I am trying to create a website such as http://melaniedaveid.com/ to improve my coding abilities. I created the first section page and it turned out great. But when I added another section, the previous section didn't fill up the whole page anymore (picture: http://imgur.com/a/EbUKn).
In order to solve this I gave full height to the first sections ID:
#header {
height: 100%;}
This fixed the problem(http://imgur.com/a/BlckC) but now when I resize my browser the second section over flows into my first, covering the text(http://imgur.com/a/C1jED). Any suggestions/leads would be greatly appreciated!
body {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/img/roses.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-size: 20px;
height: 100vh;
}
/*------------------------------------------------ HOME PAGE ------------------------------------------------------------------*/
/*------------------------------
HEADING TEXT
-------------------------------*/
.name h1 {
font-family: 'Muli', sans-serif;
font-size: 500%;
font-weight: 300;
text-align: center;
padding-top: 10%;
color: #ecf0f1;
font-family: 'Cormorant Garamond', serif;
}
.name p {
font-family: 'Play', sans-serif;
font-size: 130%;
text-align: center;
padding-top: 5%;
color: #ecf0f1;
font-family: 'Merriweather', serif;
font-weight: 300;
padding-right: 10%;
padding-left: 10%;
}
/*------------------------------
Nav Bar
-------------------------------*/
.navigation p {
display: inline;
font-family: 'Play', sans-serif;
color: #ecf0f1;
}
.navigation {
text-align: center;
padding-top: 15%;
}
.contents,
.contents:hover {
text-decoration: none;
color: #ecf0f1;
font-family: 'Delius Unicase', cursive;
}
/*------------------------------------------------ ABOUT PAGE ------------------------------------------------------------------*/
/*------------------------------
About Heading
-------------------------------*/
#about {
background-color: black;
background-size: cover;
height: 100%;
}
#header {
height: 100%;
}
<section id="header"> <!------------------------- HOME PAGE -------------------------->
<div class="container">
<div class="row">
<div class="col-xs-12 name">
<h1>Temple Naylor</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12 name">
<p>I create Web-designs with a sense of Feng-Shui in mind; resulting for a intuitive, responsive, harmonious, experience for users across the world.</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 navigation hidden-sm-down">
<p><a class="contents" href="#">ABOUT</a> / </p>
<p><a class="contents" href="#">WORK</a> / </p>
<p><a class="contents" href="#">CONTACT</a> / </p>
<p><a class="contents" href="#">PHOTOGRAPHY</a></p>
</div>
</div>
</div>
</section>
<section id="about"> <!------------------------- ABOUT PAGE -------------------------->
<div class="container">
<div class="row about">
<div class="col-md-6">
<p class="big-text"></p>
</div>
</div>
<div class="row">
<div class="col-md-6 about-text">
<p >Yup</p>
</div>
</div>
</div>
</section>
You can use css vh property for this.
#header {
height: 100vh;
}
here is more info about css units. Hope this helps you.
change #header height to min-height:
#header {
min-height: 100%;
}
Theres a problem I have throughout my site and I'm unsure how to solve it. When I try to add padding or margins to certain elements they just don't work.
Here is a jsfiddle of part of the site that isn't responding to the css.
https://jsfiddle.net/a90sns1c/
I am trying to add padding to the top of .banner-sub but the padding just overlaps the above elements not pushing it down.
css:
#banner-wrap{
text-align: center;
}
.banner-title{
padding-top: 75px;
padding-bottom: 40px;
color:#fff;
font-size: 42px!important;
}
.banner-icons{
width: 780px;
margin: 0 auto!important;
padding-bottom: 50px!important;
}
#banner-button{padding-bottom: 50px;
}
#banner-content{
background-image:url('../images/banner.png');
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
.banner-sub{
font-size: 24px!important;
font-family: 'Hind', sans-serif!important;
font-weight: 400;
}
#anchor-icon{padding-bottom: 30px;}
html:
<div id="banner-wrap">
<div id="banner" class="container">
<!-- <div class="banner-bg-img">
<img src="images/banner.png" />
</div>-->
<div id="banner-content">
<h1 class="banner-title">Quality assurance through planning<br /><span class="banner-sub">Nationwide leaflet distribution and sample delivery</span></h1>
<div class="section group banner-icons">
<div class="col span_1_of_4">
<img src="images/icon1.png" />
</div>
<div class="col span_1_of_4">
<img src="images/icon2.png" />
</div>
<div class="col span_1_of_4">
<img src="images/icon3.png" />
</div>
<div class="col span_1_of_4">
<img src="images/icon4.png" />
</div>
</div>
<div id="banner-button"> WHY CHOOSE US</div>
<div id="anchor-icon"><img src="images/down-icon.png" /></div>
</div>
</div>
</div>
Add display:inline-block to .banner-sub class.
.banner-sub {
display: inline-block;
font-family: "Hind",sans-serif !important;
font-size: 24px !important;
font-weight: 400;
padding-top: 200px;
}
jsfiddle
Set display:block; or dispaly:inline-block. <span>is a inline element.
CSS
.banner-sub{
display:block;
font-size: 24px!important;
font-family: 'Hind', sans-serif!important;
font-weight: 400;
padding-top:200px;
}
DEMO HERE
You are applying class .banner-sub on span which is an inline element , as your class .banner-sub does not have any display property set in it , by default display:inline will be set on span as its an inline element.width padding margin wont apply on inline elements (if you are wondering why please see this What is inline , block and Inline-block in css.)
Now for your problem what you can do. i would suggest couple of changes instead of quick-fix (using inline-block) on span.
As i see in you above code you have used h1 tag (default font-size:24px;) but you override it with font-size 42px in your css. so you dont really need h1 here ,instead of using h1 tag use a div and put another div inside instead of span that should be the proper way considering your scenario. posting your code with all the suggested changes.
#banner-wrap {
text-align: center;
}
.banner-title {
padding-top: 75px;
padding-bottom: 40px;
color: #ccc;
font-size: 42px!important;
}
.banner-icons {
width: 780px;
margin: 0 auto!important;
padding-bottom: 50px!important;
}
#banner-button {
padding-bottom: 50px;
}
#banner-content {
background-image: url('../images/banner.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.banner-sub {
font-size: 24px!important;
font-family: 'Hind', sans-serif!important;
font-weight: 400;
padding-top: 200px;
}
#anchor-icon {
padding-bottom: 30px;
}
<div id="banner-wrap">
<div id="banner" class="container">
<!-- <div class="banner-bg-img">
<img src="images/banner.png" />
</div>-->
<div id="banner-content">
<div class="banner-title">Quality assurance through planning
<div class="banner-sub">Nationwide leaflet distribution and sample delivery</div>
</div>
<div class="section group banner-icons">
<div class="col span_1_of_4">
<img src="images/icon1.png" />
</div>
<div class="col span_1_of_4">
<img src="images/icon2.png" />
</div>
<div class="col span_1_of_4">
<img src="images/icon3.png" />
</div>
<div class="col span_1_of_4">
<img src="images/icon4.png" />
</div>
</div>
<div id="banner-button"> WHY CHOOSE US
</div>
<div id="anchor-icon">
<a href="#">
<img src="images/down-icon.png" />
</a>
</div>
</div>
</div>
</div>
Span element has display:inline by default so padding does not effect it. You have to give display:inline-block or display: block the element(.banner-sub).
#banner-wrap{
text-align: center;
}
.banner-title{
position:absolute;
padding-top: 75px;
padding-bottom: 40px;
color:#ccc;
font-size: 42px!important;
}
.banner-icons{
position:absolute;
width: 780px;
margin: 0 auto!important;
padding-bottom: 50px!important;
}
#banner-button{padding-bottom: 50px;
}
#banner-content{
background-image:url('../images/banner.png');
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
.banner-sub{
font-size: 24px!important;
font-family: 'Hind', sans-serif!important;
font-weight: 400;
padding-top:200px;
}
#anchor-icon{padding-bottom: 30px;}