I would like 3 responsive columns in a section where the ".service-icon" are centered in each column. I have an image for the background of the column (dirtcolumn.png but this can be replaced by a full height div... all i want is it to be centered inside the div/column). You can see where the problem occurs on my first website in the first section under the cover ----> MOST RECENT SCREENSHOT - http://aleven.netne.net/CDH/
HTML: (after arranging every markup i could possibly think of which included giving all divs classes col-md-4 col-xs-4 ETC. ETC.)
<section id="services">
<div class="container-fluid">
<div class="row">
<div class="columndirt col-md-4 text-center">
<div class="service-icon">
<div class="icon-daycare">
</div>
</div>
</div>
<div class="columndirt col-md-4 text-center">
<div class="service-icon">
<div class="icon-daycare">
</div>
</div>
</div>
<div class="columndirt col-md-4 text-center">
<div class="service-icon">
<div class="icon-daycare">
</div>
</div>
</div>
</div>
</div>
</section>
CSS:
#services {
background-color: #291501;
/*background-image: url(../images/cdh/newheader/ps/dirtcolumns.png);*/
padding: 0px 0;
padding-bottom: 0px;
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: center center;
position: relative;
min-height: 590px;
display: block;
vertical-align: middle;
position: relative;
}
.columndirt {
float: none;
margin: 0 auto;
background-image: url(../images/cdh/newheader/ps/dirtcolumn.png);
background-size: cover;
background-repeat: no-repeat;
background-size: 70% 100%;
top:0;
bottom:0;
max-height: auto;
max-width: 37%;
min-width: 37%;
background-position: center center;
text-align: center center;
vertical-align: middle;
position: absolute;
}
.service-icon {
float: none;
margin: 0 auto;
margin: 158px;
margin-top: 180px;
border-radius: 100%;
background-color: #6d4827;
background-image: url(../images/cdh/newheader/ps/dots.png);
background-size: 1500px;
display: inline-block;
font-size: 36px;
height: 170px;
line-height: 170px;
width: 170px;
-webkit-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
vertical-align: middle;
}
.icon-daycare {
vertical-align: middle;
color: #9f6c43;
display: inline-block;
max-width: 100%;
min-height: 50%;
min-width: 100%;
background-image: url(../images/cdh/newheader/ps/daycareicon.png);
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
}
Div or section's height always depends on the contents height. But if you want to give it a height, you can use min-height or you can use contents padding. Change the padding and give the height you want.
Here is the HTML
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<section id="services">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="columndirt">
<div class="service-icon">
<div class="icon-daycare">
<div class="box text-center"></div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="columndirt">
<div class="service-icon">
<div class="icon-daycare">
<div class="box text-center"></div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="columndirt">
<div class="service-icon">
<div class="icon-daycare">
<div class="box text-center"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- BEGIN LINK --><img src="http://files.namecheap.com/graphics/linkus/200x200-4.gif" width="200" height="200" border="0" alt="Namecheap.com"><!-- END LINK -->
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS
#services {
background-color: #291501;
/*background-image: url(../images/cdh/newheader/ps/dirtcolumns.png);*/
padding: 0px 0;
padding-bottom: 0px;
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: center;
position: relative;
min-height: 590px;
display: block;
vertical-align: middle;
position: relative;
padding-top: 100px;
//height: 500px;
}
.columndirt {
border: 1px solid #fff;
background: #fff;
}
.service-icon {
float: none;
/* margin: 0 auto;
margin: 158px;
margin-top: 180px;*/
border-radius: 100%;
background-color: #6d4827;
background-image: url(../images/cdh/newheader/ps/dots.png);
background-size: 1500px;
display: inline-block;
font-size: 36px;
height: 170px;
line-height: 170px;
width: 170px;
-webkit-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
vertical-align: middle;
margin: 100px 0;
}
.icon-daycare {
vertical-align: middle;
color: #9f6c43;
display: inline-block;
max-width: 100%;
min-height: 50%;
min-width: 100%;
background-image: url(../images/cdh/newheader/ps/daycareicon.png);
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
.box{
height: 30px;
width: 30px;
background: green;
margin: 25px 0 0 70px;
}
Related
Hi I'm following a tutorial. As far as I can see I have written exactly the same thing in my code but it is behaving differently.
.container {
display: flex;
width: 90vw;
}
.panel {
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
height: 80vh;
border-radius: 50px;
color: white;
cursor: pointer;
flex: 0.5;
margin: 10px;
position: relative;
transition: flex 0.7s ease-in;
}
.panel h3 {
font-size: 24px;
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
opacity: 0;
}
.panel.active {
flex: 5;
}
.panel.active h3 {
opacity: 1;
}
<body>
<div class="container">
<div class="panel active" style="background-image: url('./vincent-guth-uhoILl3HUZM-unsplash.jpg')">
<h3>Beautiful Sky</h3>
</div>
<div class="panel" style="background-image: url('./juskteez-vu-TIrXot28Znc-unsplash.jpg')">
<h3>Incredible sky</h3>
</div>
<div class="panel" style="background-image: url('./casey-horner-fsJB3KT2rj8-unsplash.jpg')">
<h3>Northern Lights</h3>
</div>
<div class="panel" style="background-image: url('./vincent-guth-uhoILl3HUZM-unsplash.jpg')">
<h3>Northern Lights</h3>
</div>
<div class="panel" style="background-image: url('./vincent-guth-uhoILl3HUZM-unsplash.jpg')">
<h3>Beautiful Sky</h3>
</div>
</div>
</div>
</body>
but on the screen the panel that's active loses all the css from the panel class instead of using both. Any ideas why this might be? Thanks!
Actually it works but the problem is you are using 100% size of your images so its looks like this:
I added border to demonstrate
.container {
display: flex;
width: 90vw;
}
.panel {
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
height: 80vh;
border-radius: 50px;
color: white;
cursor: pointer;
flex: 0.5;
margin: 10px;
position: relative;
transition: flex 0.7s ease-in;
border: red 2px solid;
}
.panel h3 {
font-size: 24px;
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
opacity: 0;
}
.panel.active {
flex: 5;
}
.panel.active h3 {
opacity: 1;
}
<body>
<div class="container">
<div class="panel active" style="background-image: url('https://picsum.photos/id/266/200/300')">
<h3>Beautiful Sky</h3>
</div>
<div class="panel" style="background-image: url('https://picsum.photos/id/230/200/300')">
<h3>Incredible sky</h3>
</div>
<div class="panel" style="background-image: url('https://picsum.photos/id/217/200/300')">
<h3>Northern Lights</h3>
</div>
<div class="panel" style="background-image: url('https://picsum.photos/id/227/200/300')">
<h3>Northern Lights</h3>
</div>
<div class="panel" style="background-image: url('https://picsum.photos/id/137/200/300')">
<h3>Beautiful Sky</h3>
</div>
</div>
</body>
The solution is using background-size: cover; instead
.container {
display: flex;
width: 90vw;
}
.panel {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 80vh;
border-radius: 50px;
color: white;
cursor: pointer;
flex: 0.5;
margin: 10px;
position: relative;
transition: flex 0.7s ease-in;
border: red 2px solid;
}
.panel h3 {
font-size: 24px;
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
opacity: 0;
}
.panel.active {
flex: 5;
}
.panel.active h3 {
opacity: 1;
}
<body>
<div class="container">
<div class="panel active" style="background-image: url('https://picsum.photos/id/266/200/300')">
<h3>Beautiful Sky</h3>
</div>
<div class="panel" style="background-image: url('https://picsum.photos/id/230/200/300')">
<h3>Incredible sky</h3>
</div>
<div class="panel" style="background-image: url('https://picsum.photos/id/217/200/300')">
<h3>Northern Lights</h3>
</div>
<div class="panel" style="background-image: url('https://picsum.photos/id/227/200/300')">
<h3>Northern Lights</h3>
</div>
<div class="panel" style="background-image: url('https://picsum.photos/id/137/200/300')">
<h3>Beautiful Sky</h3>
</div>
</div>
</body>
Try to change value of background-size property to cover (background-size: cover). I think this is what you need
I ran your code in codepen. I only changed the background-images to colors since the were loaded locally. It is behaving as it should, the panel active div displaying everything defined in the panel class aswell. What are you missing?
https://codepen.io/wischn/pen/OJwOQxp
.container {
display: flex;
width: 90vw;
}
.panel {
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
height: 80vh;
border-radius: 50px;
color: white;
cursor: pointer;
flex: 0.5;
margin: 10px;
position: relative;
transition: flex 0.7s ease-in;
}
.panel h3 {
font-size: 24px;
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
opacity: 0;
}
.panel.active {
flex: 5;
}
.panel.active h3 {
opacity: 1;
}
i'm using position: fixed and width 90% for a footer inside a overlay. The overlay and the footer are both 90% wider but the footer is wider. I guess it's because the footer ignores the scrollbar in chrome. Is there a way to solve this problem without JavaScript?
Here is quick example: https://jsfiddle.net/a15kpuL9/3/
The HTML:
<div class="modal hidden" data-modal-detail="5">
<div class="container">
<div class="body">
<div id="inner-5" class="career-detail-inner-wrap" >
<div class="stickyFooter">
</div>
</div>
</div>
</div>
</div>
The CSS:
.stickyFooter {
width: 90%;
text-align: center;
position: fixed;
bottom: 0;
height: 150px;
background-color: #F5F5F5;
}
.body {
text-align: left;
-webkit-box-shadow: -7px 0 31px 3px rgba(0, 0, 0, 0.16);
display: inline-block;
background-color: white;
border-radius: 10px;
margin-top: 150px;
width: 90%;
}
The Problem:
change the 90% to 90 vw instead. Here you go. :)
.stickyFooter {
width: 90vw;
text-align: center;
position: fixed;
bottom: 0;
height: 150px;
background-color: red;
}
.body {
text-align: left;
-webkit-box-shadow: -7px 0 31px 3px rgba(0, 0, 0, 0.16);
display: inline-block;
background-color: white;
border-radius: 10px;
margin-top: 150px;
width: 90vw;
}
.container {
text-align: center;
vertical-align: middle;
overflow-y: scroll;
height: 100%;
display: block;
width: 100%;
position: absolute;
right: 0;
left: 0;
margin: 0 !important;
max-width: 100%;
padding: 0;
}
.career-detail-inner-wrap {
background: green;
height: 800px
}
<div class="modal hidden" data-modal-detail="5">
<div class="container">
<div class="body">
<div id="inner-5" class="career-detail-inner-wrap">
Inner
<div class="stickyFooter">
Sticky
</div>
</div>
</div>
</div>
</div>
I see one less closing div , could that be the problem
<div class="modal hidden" data-modal-detail="5">
<div class="container">
<div class="body">
</div>
<div id="inner-5" class="career-detail-inner-wrap" >
<div class="stickyFoooterSecond">
</div>
</div>
</div>
</div>
or
<div class="modal hidden" data-modal-detail="5">
<div class="container">
<div class="body">
<div id="inner-5" class="career-detail-inner-wrap" >
<div class="stickyFoooterSecond">
</div>
</div>
</div>
</div>
</div>
Trying to do my first solo project after spending over a year learning, and feeling like I've learned nothing.
For some reason, creating a banner is proving extremely difficult.
At first, I wanted to tag my nav-bar to the bottom of my banner. I gave up on that, and am now just trying to get my banner to work in the most basic of ways.
If I put the image inline with HTML, it stays at the forefront of everything and scrolls with the page. No bueno. background-image is not working at all.
I want it to stay at the top of the page. I want the navbar to stay at the top of the user's visible area (so, it scrolls with the page).
I've spent three hours on this!
Here's my code:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Teo Hannum | Teacher of the Alexander Technique</title>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.0.0/bootstrap-social.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
<title>Teo Hannum | Teacher of the Alexander Technique</title>
</head>
<!-- MASTHEAD -->
<body> <!-- data-spy="scroll" data-target=".navbar" data-offset="0"> -->
<div id="page">
<header role="banner">
<!-- NAVBAR -->
<nav id="mainnavbar" class="navbar navbar-default navbar-fixed-top" roll="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="">Teo Hannum | Teacher of the Alexander Technique</a>
</div>
<ul class="nav navbar-nav navbar-right" id="topMenu">
<li class="active">
Who
</li>
<li>
What
</li>
<li>
Where
</li>
</ul>
</div>
</nav>
<div id="brand">
<p>Move with Fluidity and Intention</p>
</div>
</header>
<div class="bannerimage">
<div class="bannerWrapper">
<div class="bannerText">
<p>Move with Fluidity and Intention</p>
</div>
</div>
</div>
<!-- WHO SECTION -->
<div id="who">
</div>
<!-- WHAT SECTION -->
<div id="what">
<article>
<div class="portblock">
<h1>Portfolio</h1>
<p>Utilizing the "less is more" mindset, I create focused content that delivers results while developing brand culture and identity.
</article>
<div class="container-fluid img-thumbnail">
<div class="row">
<img class="img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1081">
<img class="img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1067">
<img class="img-responsive img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1044">
<img class="img-responsive img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1012">
</div>
</div>
</div>
</div>
<div id="where">
</div>
</div>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
body{
font-family:'Open Sans Condensed', sans-serif;
color:white;
margin:0;
padding:0;
}
h1{
padding: 0;
margin-top: -1%;
text-align: center;
color:black;
font-size: 6.5vw;
}
p{
font-family: 'EB Garamond', serif;
font-size: 2.5vw;
}
header {
height: 70px;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
font-size: 12px;
line-height: 14px;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 2px;
z-index: 66666;
}
.navbar-nav{
font-family:'Open Sans Condensed', sans-serif;
font-size: 2.0em;
}
.navbar-brand{
font-family:'Open Sans Condensed', sans-serif;
font-size:2.0em;
}
/* MASTHEAD */
#masthead {
position: relative;
}
.custom-header {
display: block;
height: auto;
}
#mast-img {
max-width: 100%;
display: block;
height: auto;
position: fixed;
}
#brand {
z-index: 100;
position: absolute;
color: white;
font-size: 40px;
font-weight: bold;
line-height: 50px;
left: 150px;
top: 325px;
}
#masthead .wrap {
position: relative;
}
#topMenu {
z-index: 1;
}
/* END MASTHEAD */
#page {
position: relative;
}
#bannerimage {
width: 100%;
background-image: url(https://static.pexels.com/photos/486895/pexels-photo-486895.jpeg);
height: 405px;
background-color: purple;
background-position: center;
}
.bannerWrapper {
width: 94%;
max-width: 960px;
margin: 0px auto;
}
.btn:hover{
color:#FEEE8B;
}
.btn:active{
color:white;
}
.btn{
align-text: center;
margin-bottom:3%;
margin-right:5px;
margin-left:5px;
border-radius: 0 !important;
font-size:1.5vw;
color:white;
}
article{
padding-bottom:10px;
}
.block{
background-color:rgba(157,178,197,.6);
opacity:1;
padding:1em;
width:50%;
height:12%;
margin-right:auto;
margin-left:auto;
margin-top:10%;
object-border:10px;
}
.portblock{
text-align:right;
padding:1em;
background-color:rgba(157,178,197,.6);
opacity:1;
width:50%;
height:12%;
margin-top:10%;
margin-right:1%;
margin-left:auto;
object-border:10px;
}
.portrait{
width:40%;
height:auto;
border-radius:50%;
margin-bottom:3%;
margin-top:3%;
opacity:.9;
}
.img-thumbnail{
background:rgba(157,178,197,.6);
margin-top:8%;
padding:1em;
margin-right:1%;
margin-left:1%;
}
#who{
background-image:url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1422394882588-508654c3f5d4.jpeg?X-Amz-Date=20161019T232852Z&X-Amz-Expires=300&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Signature=3b5a5267c478a5ea16ade4496e34221342748dbda8813840fa9867fe3270b6f7&X-Amz-Credential=ASIAIK2R6BOZXGQHU5CQ/20161019/us-west-2/s3/aws4_request&X-Amz-SignedHeaders=Host&x-amz-security-token=FQoDYXdzEDkaDN3PwRF5BiQ0M7XC3CL6Aal8I83b8wlOIm5EBzQqiMdVj0tSmaoJn1a8DHvHD7bWWs47ywISxJpL95AavWhli2XQ3z4WgaPLtJz5BIoPJUFRHluYm5DH46Q62nXJIDY%2BJ/GrScPriWBko6yd/9YQ4A/7GuFpH6z/fG2ZenPcACf9hkpUj5aKD72scXWuANgZbF4aN5xWQBpxYteRfnh3zio86PaG84yfMr3X5R6GVmlQMAqFFB9OYhAzH7mkCwKZYXT6Hb3IdxNpiaYqxgUsvl3G4Vdi8vg813n78dwY97hXkwWSaItLh0Nkq7JM%2BQ/mIisjgrm1ntZ3kEb%2Bbk2nUmhRr2EtTHC4cqwomIGgwAU%3D");
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:800px;
padding: 1px;
}
#what{
background-image:url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1467348733814-f93fc480bec6.jpeg?X-Amz-Date=20161019T232942Z&X-Amz-Expires=300&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Signature=2c6a81a324d7a3ae6587b00c8cfba95f6620b9ec47222caa643963bfbae97b76&X-Amz-Credential=ASIAIK2R6BOZXGQHU5CQ/20161019/us-west-2/s3/aws4_request&X-Amz-SignedHeaders=Host&x-amz-security-token=FQoDYXdzEDkaDN3PwRF5BiQ0M7XC3CL6Aal8I83b8wlOIm5EBzQqiMdVj0tSmaoJn1a8DHvHD7bWWs47ywISxJpL95AavWhli2XQ3z4WgaPLtJz5BIoPJUFRHluYm5DH46Q62nXJIDY%2BJ/GrScPriWBko6yd/9YQ4A/7GuFpH6z/fG2ZenPcACf9hkpUj5aKD72scXWuANgZbF4aN5xWQBpxYteRfnh3zio86PaG84yfMr3X5R6GVmlQMAqFFB9OYhAzH7mkCwKZYXT6Hb3IdxNpiaYqxgUsvl3G4Vdi8vg813n78dwY97hXkwWSaItLh0Nkq7JM%2BQ/mIisjgrm1ntZ3kEb%2Bbk2nUmhRr2EtTHC4cqwomIGgwAU%3D");
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:800px;
padding: 1px;
}
#where{
background-image:url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1467348733814-f93fc480bec6.jpeg?X-Amz-Date=20161019T232942Z&X-Amz-Expires=300&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Signature=2c6a81a324d7a3ae6587b00c8cfba95f6620b9ec47222caa643963bfbae97b76&X-Amz-Credential=ASIAIK2R6BOZXGQHU5CQ/20161019/us-west-2/s3/aws4_request&X-Amz-SignedHeaders=Host&x-amz-security-token=FQoDYXdzEDkaDN3PwRF5BiQ0M7XC3CL6Aal8I83b8wlOIm5EBzQqiMdVj0tSmaoJn1a8DHvHD7bWWs47ywISxJpL95AavWhli2XQ3z4WgaPLtJz5BIoPJUFRHluYm5DH46Q62nXJIDY%2BJ/GrScPriWBko6yd/9YQ4A/7GuFpH6z/fG2ZenPcACf9hkpUj5aKD72scXWuANgZbF4aN5xWQBpxYteRfnh3zio86PaG84yfMr3X5R6GVmlQMAqFFB9OYhAzH7mkCwKZYXT6Hb3IdxNpiaYqxgUsvl3G4Vdi8vg813n78dwY97hXkwWSaItLh0Nkq7JM%2BQ/mIisjgrm1ntZ3kEb%2Bbk2nUmhRr2EtTHC4cqwomIGgwAU%3D");
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:800px;
padding: 1px;
}
Please note that I copy-pasted most of the CSS from another project, so there's a lot of yet-to-be-used stuff in here.
You have a few issues here. First , you have created a head section twice, once within the body section. Keep the head together, have one head section and one body section. Opening and closing these sections off more than once will cause problems.
As for the background image, you have a semi-colon before your no-repeat (etc), in your who/what/where css; if your remove this semi colon, it works.
You also have 2 other minor issues in your css; it's text-align not align-text, also replace object-border with just border
EDIT: Your main issue was that you had background-image: where there should have been just background: in the css (because you had all the information there and not just the image url). Also I removed the background-size:cover from the small images, as these would have covered the main background image that was set to cover. Your big background image had no inverted commas around the filepath in the url brackets. Also your banner-image is an id, not a class as it was originally being called in the HTML.
I created a snippet, so if you run it you can see the output.
Hope this helps.
body {
font-family: 'Open Sans Condensed', sans-serif;
color: white;
margin: 0;
padding: 0;
}
h1 {
padding: 0;
margin-top: -1%;
text-align: center;
color: black;
font-size: 6.5vw;
}
p {
font-family: 'EB Garamond', serif;
font-size: 2.5vw;
}
header {
height: 70px;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
font-size: 12px;
line-height: 14px;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 2px;
z-index: 66666;
}
.navbar-nav {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 2.0em;
}
.navbar-brand {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 2.0em;
}
/* MASTHEAD */
#masthead {
position: relative;
}
.custom-header {
display: block;
height: auto;
}
#mast-img {
max-width: 100%;
display: block;
height: auto;
position: fixed;
}
#brand {
z-index: 100;
position: absolute;
color: white;
font-size: 40px;
font-weight: bold;
line-height: 50px;
left: 150px;
top: 325px;
}
#masthead .wrap {
position: relative;
}
#topMenu {
z-index: 1;
}
/* END MASTHEAD */
#page {
position: relative;
}
#bannerimage {
width: 100%;
height: 405px;
background-image: url('https://static.pexels.com/photos/486895/pexels-photo-486895.jpeg');
background-repeat:no-repeat;
background-position: center center
background-size:cover;
}
.bannerWrapper {
width: 94%;
max-width: 960px;
margin: 0px auto;
}
.btn:hover {
color: #FEEE8B;
}
.btn:active {
color: white;
}
.btn {
text-align: center;
/*not align-text*/
margin-bottom: 3%;
margin-right: 5px;
margin-left: 5px;
border-radius: 0 !important;
font-size: 1.5vw;
color: white;
}
article {
padding-bottom: 10px;
}
.block {
background-color: rgba(157, 178, 197, .6);
opacity: 1;
padding: 1em;
width: 50%;
height: 12%;
margin-right: auto;
margin-left: auto;
margin-top: 10%;
border: 10px;
}
.portblock {
text-align: right;
padding: 1em;
background-color: rgba(157, 178, 197, .6);
opacity: 1;
width: 50%;
height: 12%;
margin-top: 10%;
margin-right: 1%;
margin-left: auto;
border: 10px;
/*it's just border, not object-border*/
}
.portrait {
width: 40%;
height: auto;
border-radius: 50%;
margin-bottom: 3%;
margin-top: 3%;
opacity: .9;
}
.img-thumbnail {
background: rgba(157, 178, 197, .6);
margin-top: 8%;
padding: 1em;
margin-right: 1%;
margin-left: 1%;
}
#who {
background: url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1422394882588-508654c3f5d4.jpeg") no-repeat center center fixed;
/*the reason why the bg-image wasn't working was you had a semi-colon before no-repeat*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
/*background-size: cover;*/
height: 800px;
padding: 1px;
}
#what {
background: url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1467348733814-f93fc480bec6.jpeg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
/*background-size: cover;*/
height: 800px;
padding: 1px;
}
#where {
background: url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1467348733814-f93fc480bec6.jpeg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
/*background-size: cover;*/
height: 800px;
padding: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<link href='https://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
<title>Teo Hannum | Teacher of the Alexander Technique</title>
<!-- MASTHEAD -->
<body>
<!-- data-spy="scroll" data-target=".navbar" data-offset="0"> -->
<div id="page">
<header role="banner">
<!-- NAVBAR -->
<nav id="mainnavbar" class="navbar navbar-default navbar-fixed-top" roll="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="">Teo Hannum | Teacher of the Alexander Technique</a>
</div>
<ul class="nav navbar-nav navbar-right" id="topMenu">
<li class="active">
Who
</li>
<li>
What
</li>
<li>
Where
</li>
</ul>
</div>
</nav>
<div id="brand">
<p>Move with Fluidity and Intention</p>
</div>
</header>
<div id="bannerimage">
<div class="bannerWrapper">
<div class="bannerText">
<p>Move with Fluidity and Intention</p>
</div>
</div>
</div>
<!-- WHO SECTION -->
<div id="who">
</div>
<!-- WHAT SECTION -->
<div id="what">
<article>
<div class="portblock">
<h1>Portfolio</h1>
<p>Utilizing the "less is more" mindset, I create focused content that delivers results while developing brand culture and identity.</div>
</article>
<div class="container-fluid img-thumbnail">
<div class="row">
<img class="img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1081">
<img class="img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1067">
<img class="img-responsive img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1044">
<img class="img-responsive img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1012">
</div>
</div>
</div>
</div>
<div id="where">
</div>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script>
<script src="js/index.js"></script>
I have created a website and i am unable to make the tiled layout responsive. I am a beginner and i have no idea how to make my website responsive. Any help will be appreciated. The css and html is given below. Plus the background is repeating itself 3 times while i have added no repeat property in css.
HTML
<div class="grid">
<div class="tile hvr-reveal " id="tile1">
<div style="text-align: center;">
<div class="img-with-text ">
<p>
<strong>
Contact Us
</strong>
<img src="homepage images/file242.png" alt="sometext" width="64" height="64" id="img0"/>
</p>
</div>
</div>
</div>
<div class="tile hvr-reveal" id="tile2">
<div style="text-align: center;">
<div class="img-with-text">
<p>
<strong>
Products
</strong>
<img src="homepage images/shopping145.png" alt="sometext" width="64" height="64" id="img"/>
</p>
</div>
</div>
</div>
<div class="tile hvr-reveal " id="tile3">
<div style="text-align: center;">
<div class="img-with-text">
<p>
<strong>
Partners
</strong>
<img src="homepage images/celebration19.png" alt="sometext" width="64" height="64" id="img2"/>
</p>
</div>
</div>
</div>
<div class="tile hvr-reveal" id="tile4">
<div style="text-align: center;">
<div class="img-with-text">
<p>
<strong>
About Us
</strong>
<img src="homepage images/men16.png" alt="sometext" width="64" height="64" id="img1"/>
</p>
</div>
</div>
</div>
</div>
CSS
body {
font-family: chewy;
color: #ffffff;
background-image: url(pictures%20for%20web/bg3.jpg) ;
background-position: center center;
background-attachment: fixed;
background-size: cover;
**strong text**background-repeat: no-repeat;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.grid {
width: 1140px;
height: 650px;
margin: auto;
}
.tile {
position: absolute;
width: 200px;
left: 451px;
top: 152px;
height: 152px;
box-sizing: border-box;
}
#tile1 {
top: 407px;
left: 754px;
width: 338px;
height: 196px;
margin-left: 2px;
margin-right: 2px;
background-color: #ff3300;
}
#tile2 {
margin-left: 2px;
margin-right: 2px;
top: 100px;
left: 980px;
width: 148px;
height: 154px;
background-color: #008000;
}
#tile3 {
top: 255px;
left: 523px;
width: 200px;
height: 150px;
background-color: #660066 ;
margin-left: 2px;
margin-right: 2px;
}
#tile4 {
top: 255px;
left: 118px;
width: 200px;
height: 150px;
background-color: #990000;
margin-left: 2px;
margin-right: 2px;
}
I'm guessing you want something like this:
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
.container {
position: relative;
top: 0;
left: 0;
width: 90%;
height: auto;
margin-left: 5%;
background-color: #444;
display: block;
text-align: center;
}
.box {
border: solid 1px #000;
height: 200px;
width: 200px;
display: inline-block;
margin: 25px auto;
}
.box:nth-of-type(1){
background: yellow;
}
.box:nth-of-type(2){
background: red;
}
.box:nth-of-type(3){
background: blue;
}
.box:nth-of-type(4){
background: green;
}
Which will keep the boxes aligned and depending on the width of the browser, shifts them.
http://codepen.io/DB1500/pen/JGqaBZ
I need some advice on this issue i'm having. In the jsfiddle below, I'm trying to create a responsive grid layout. The issue with what i have is, i would like the text to be in the middle of each individual grid. I've tried bumping it using margin-top but instead of the images stacking onto each other while resizing, the images are overlapping each other. The end result desired will be to have the text aligned center onto the image and have no gaps on all sides of the grid when resizing according to various screen resolution.
Link: http://jsfiddle.net/kelvinchow/VaDS9/
<style type="text/css">
#wrapper {
display: block;
width: 100%;
height: auto;
background: green;
}
.box {
display: inline-block;
float: left;
width: 50%;
height: auto;
vertical-align: baseline;
background: red;
}
.box-img img {
width: 100% !important;
height: auto;
}
.box-title {
display: block;
background: grey;
height: 25px;
font-size: 20px;
font-family: helvetica, san serif;
color: blue;
text-align: center;
margin-top: -100px;
}
</style>
<div id="wrapper">
<div class="box">
<div class="box-img">
<img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
</div>
<p class="box-title">howdy</p>
</div>
<div class="box">
<div class="box-img">
<img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
</div>
<p class="box-title">howdy</p>
</div>
<div class="box">
<div class="box-img">
<img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
</div>
<p class="box-title">howdy</p>
</div>
<div class="box">
<div class="box-img">
<img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
</div>
<p class="box-title">howdy</p>
</div>
</div>
You'll get this:
Fiddle here: http://jsbin.com/osazav/1.
With this markup:
<body>
<div id="tl" class="box">
<p class="box-title">howdy</p>
</div>
<div id="tr" class="box">
<p class="box-title">howdy</p>
</div>
<div id="bl" class="box">
<p class="box-title">howdy</p>
</div>
<div id="br" class="box">
<p class="box-title">howdy</p>
</div>
</body>
And this css:
div.box {
background: url('http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png');
position: absolute;
height: 50%;
width: 50%;
background-size: cover;
background-position: center;
}
div.box p.box-title {
color: red;
background-color: black;
padding: 5px;
position: absolute;
margin: -10px -20px;
top: 50%;
left: 50%;
}
div.box#tl { top: 0%; left: 0%; }
div.box#tr { top: 0%; left: 50%; }
div.box#bl { top: 50%; left: 0%; }
div.box#br { top: 50%; left: 50%; }