On the following site, I have a child div absolutely positioned at the bottom of its parent div - the hero image.
http://helpthemgrow.staging.wpengine.com/
Adding padding to the child div causes it to break out of parent div
Here is my code:
<div class="home-hero">
<div class="home-hero-img">
<div class="wrap">
<div class="home-image widget-area">
<section id="media_image-2" class="widget widget_media_image">
<div class="widget-wrap">
<img width="200" height="300" src="http://helpthemgrow.staging.wpengine.com/wp-content/uploads/2018/01/help-tehm-grow-book-cover-200x300.jpg" class="image wp-image-43 attachment-medium size-medium" alt="" style="max-width: 100%; height: auto;" srcset="http://helpthemgrow.staging.wpengine.com/wp-content/uploads/2018/01/help-tehm-grow-book-cover-200x300.jpg 200w, http://helpthemgrow.staging.wpengine.com/wp-content/uploads/2018/01/help-tehm-grow-book-cover.jpg 250w" sizes="(max-width: 200px) 100vw, 200px">
</div>
</section>
</div>
</div><!-- end wrap -->
</div><!-- end home-hero-img -->
<div class="home-hero-cta">
<div class="wrap">
<div class="three-fourths first">
<div class="home-hero-cta-text">Careers are developed one conversation at a time – over time.</div>
</div>
<div class="one-fourth">
<a class="button" href="/book/">Learn more</a>
</div>
</div><!-- end wrap -->
</div><!-- end home-hero-cta -->
</div><!-- end home-hero -->
Here is my CSS:
.home-hero {
background-image: url('/wp-content/uploads/2018/02/htg-hero-slide-one.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
padding: 100px 0 150px 0;
color: #fff;
margin: 0;
position:relative;
}
.home-hero-cta {
height: 50px;
width: 100%;
background: rgba(0,0,0,0.5);
position: absolute;
bottom: 0;
}
.home-hero-cta .wrap {
padding: 20px 0;
}
.home-hero-cta-text {
font-size: 25px;
}
What am I doing wrong?
Remove the set height that you have for home-hero-cta and that should fix your issue.
Related
I have a section in my site that should stretch all the way across the screen.
I want to add 4 images in this section, one beside the other, and make them responsive. I want them to fill the background and breaks between them as needed. How should I modify my code below to accomplish the effects I desire?
#games {
background-color: #000;
}
#games img {
width: 100%;
height: auto;
}
.4columns {
width: 32%;
display: inline-block;
}
<section id="games" class="section section-games">
<div class="container-fluid">
<div class="row">
<img class="4columns" src="resources/media/icons/1.png">
<img class="4columns" src="resources/media/icons/2.png">
<img class="4columns" src="resources/media/icons/3.png">
<img class="4columns" src="resources/media/icons/4.png">
</div>
</div>
</section>
I think you want something like this :
.map{
margin:0;
padding:0;
}
.map img{
float: left;
width: 25%;
}
<div class="map">
<span>
<img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" />
<img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" />
<img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" />
<img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" />
</span>
</div>
I have a 3 column grid, which is sitting inside a 100% container div. But as of now it is just being pulled all the way to the left side of the page. I want the three columns to be div to be centered inside the container. Here is a screenshot of the design that I'm trying to code: To fix the margin issue between each grid box, I used the technique found here (Scroll down to the last section "Roll your own...")
HTML:
<div class="featured-properties">
<div class="properties">
<div class="property">
<img src="img/sample-prop-1.jpg" alt="Sample Property" />
</div>
<div class="property">
<img src="img/sample-prop-2.jpg" alt="Sample Property" />
</div>
<div class="property">
<img src="img/sample-prop-3.jpg" alt="Sample Property" />
</div>
<div class="property">
<img src="img/sample-prop-4.jpg" alt="Sample Property" />
</div>
<div class="property">
<img src="img/sample-prop-5.jpg" alt="Sample Property" />
</div>
<div class="property">
<img src="img/sample-prop-6.jpg" alt="Sample Property" />
</div>
</div><!-- end .properties -->
</div><!-- end .featured-properties -->
CSS:
.featured-properties {
width: 100%;
}
.properties {
margin: -79px;
overflow: hidden;
clear: both;
width: 1047px;
}
.property {
float: left;
margin-left: 79px;
}
No need explanation, see the CSS below and demo (responsive!).
DEMO: http://jsfiddle.net/0m5p2818/
.properties {
text-align: center;
max-width: 720px; /* (200+(20x2))x3 */
font-size: 0; /* fix for white space bug */
margin-left: auto;
margin-right: auto;
}
.property {
display: inline-block;
margin: 20px;
font-size: 16px;
}
I'm not really sure if I understood your question, but I think CSS 3 Flexbox can help you to achieve what I think you need.
Take a look at it here and see if it works for you: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am trying to accomplish something like this:
As I am using Bootstrap, for now I have this:
<div class="col-md-3">
<div class="test">
<%= (image_tag("http://example.com.image.jpg", :class => "img-responsive")) %>
<h2>hello</h2>
</div>
</div>
</div>
CSS:
.test {
position: relative;
h2 {
background-color: #bebebe;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
}
}
This works well for big and medium screens but the problem is on smaller screens. After all elements stack to one column the problem appears with smaller images. On bigger screens where there are multiple elements in one row there is no problem, text appears on the bottom of the image. The problem is that some images are not big enough on smaller screens as they need to have width 100% of the screen and they are only 300-400ox wide. Because of that they don't use 100% of the screen, but header does use it.
It looks something like this:
**********************************
* *
* *
* Image *
* *
* *
********************************************
* Header *
********************************************
So, header spreads all the way to the left and right of the screen and jumps outside of the image. How to keep header inside of the image no matter of screen size?
Thank you!
Try this:
Demo : http://jsfiddle.net/lotusgodkk/bm3mjhm1/
CSS:
.test {
position: relative;
display:inline-block; //Add display:inline-block; if it doesn't affect your code.
}
img {
max-width:100%;
}
h2 {
background-color: #bebebe;
position: absolute;
bottom: 0;
left: 0;
right:0; // Remove width:100% and add left,right offset.
}
HTML:
<div class="test">
<img src="http://lorempixel.com/400/200/sports/1/" />
<h2>Sample TExt. Sample TExt</h2>
</div>
Check the demo for different sizes of image.
DEMO: http://jsbin.com/nobape
There are two options. The first is the answer, but it's not the best idea. When the viewport gets very small, the caption text can cover up a good portion of the image. When you look at the demo, the second row only does the caption over the image at the 500px min-width and under that, it stacks, which looks very nice and easy to read.
CSS
.img-full-width {
width: 100%;
height: auto;
}
.caption {
position: relative;
margin-bottom: 2%;
}
.caption h3 {
margin: 0;
color: #fff;
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
background: rgba(41,82,123,.8);
font-size: 15px;
}
.caption-2 {
position: relative;
margin-bottom: 2%;
}
.caption-2 h3 {
margin: -1px 0 0 0;
color: #fff;
padding: 10px;
background: rgba(41,82,123,1);
font-size: 15px;
}
#media (min-width:500px) {
.caption-2 h3 {
margin:0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(41,82,123,.8);
}
}
HTML
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="caption">
<img src="http://placekitten.com/g/400/300" class="img-full-width alt="" />
<h3>My Caption Goes Here</h3>
</div>
</div>
<div class="col-sm-4">
<div class="caption">
<img src="http://placekitten.com/g/400/300" class="img-full-width alt="" />
<h3>My Caption Goes Here</h3>
</div>
</div>
<div class="col-sm-4">
<div class="caption">
<img src="http://placekitten.com/g/400/300" class="img-full-width alt="" />
<h3>My Caption Goes Here</h3>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-4">
<div class="caption-2">
<img src="http://placekitten.com/g/400/300" class="img-full-width alt="" />
<h3>My Caption Goes Here</h3>
</div>
</div>
<div class="col-sm-4">
<div class="caption-2">
<img src="http://placekitten.com/g/400/300" class="img-full-width alt="" />
<h3>My Caption Goes Here</h3>
</div>
</div>
<div class="col-sm-4">
<div class="caption-2">
<img src="http://placekitten.com/g/400/300" class="img-full-width alt="" />
<h3>My Caption Goes Here</h3>
</div>
</div>
</div>
Take a look at this http://jsfiddle.net/0ftrnkxo/
and the site http://omarhabash.com/sites
This looks great from a desktop.. I usually dont have problems with responsive design but what can I do to make this responsive?
THE HTML
<div id="g-site1" class="col-xs-12 demo-container">
<div class="same-s same-1">
<img class="img-responsive" src="http://omarhabash.com/sites/assets/img/sites/site1.jpg" alt="">
</div>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#site1"> <i class="fa fa-search-plus"></i>
</button>
<div class="same-s same-2">
<img class="img-responsive" src="http://omarhabash.com/sites/assets/img/sites/mac.png" alt="">
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="site1" tabindex="-1" role="dialog" aria-labelledby="site1Label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content1">
<div class="modal-body">
<img class="img-responsive site" src="http://omarhabash.com/sites/assets/img/sites/site1.jpg" alt="">
</div>
</div>
</div>
</div>
THE CSS
.same-s {
height: 160px;
width: 100%;
margin: 0 auto;
}
.same-s img {
width: 100%;
display: block;
margin: 0 auto;
height: auto;
}
.same-s.same-1 {
width: 66.5%;
overflow: scroll;
position: absolute;
margin-left: 174px;
margin-top: 65px;
height: 57.25%;
}
.demo-container {
height: 56em;
}
button.btn.btn-primary.btn-lg {
margin-left: 9.9em;
margin-top: 26.5em;
position: absolute;
}
img.site {
border: 4px solid #ccc;
}
With any grid system it's best to keep it and your content separate. Don't "hack the core", as the saying goes. Here's a simplified start:
http://jsfiddle.net/isherwood/0ftrnkxo/3
.demo-container {
overflow: hidden; /* demo only--accounts for image whitespace */
}
.mac {
position: relative;
margin: -5.3% -20.5% 0 -18.5%; /* demo only--accounts for image whitespace */
}
.screen {
position: absolute;
top: 9%; /* demo only--accounts for image whitespace */
right: 17%; /* demo only--accounts for image whitespace */
left: 15.6%; /* demo only--accounts for image whitespace */
height: 58%;
overflow: auto;
}
<div class="row">
<div class="col-xs-12">
<div class="demo-container">
<div class="mac">
<img class="img-responsive" src="http://omarhabash.com/sites/assets/img/sites/mac.png" alt="" />
<div class="screen">
<img class="img-responsive" src="http://omarhabash.com/sites/assets/img/sites/site1.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
To eliminate all those negative margins and the corresponding values on .screen, crop your Mac image tight to the black border. Of course, you'll still need smaller top, right, and left values to allow the Mac's frame to show around it.
I'd also fill the Mac image's screen entirely with black. That will eliminate the need to so perfectly position what's overlaying it.
Here's a demo with two Macs in two rows.
Currently having issues trying to get these bordered text boxed to stay aligned with the above images in a way that when I re-size the page they stick with their prospective images. Currently I have them forced to stick under the images with margin css but once I re-size the boxes, the boxes all flee under the images.
EDIT: Updated code - still having similar issues but this looks more promising - attaching photo of current state.
<body>
<div id="container">
<div id="header">
<img class="leaf" src="images/freshleaf.png" height="150px" alt="freshtext"/>
<!--<button class="navbutton"> <strong> TEST </strong> </button>-->
</div>
<div id="body">
<div id="main" class="">
<div class="column">
<img class="smart" src="images/phone1.png" height="500px" alt="phone1"/>
<div class="box1"> <h3>Pie is tasty Mmmmm...</h3> </div>
</div>
<div class="column">
<img class="smart" src="images/phone2.png" height="500px" alt="phone2"/>
<div class="box2"> <h3>Pie is tasty Mmmmm...</h3> </div>
</div>
<div class="column">
<img class="smart" src="images/phone3.png" height="500px" alt="phone3"/>
<div class="box3"> <h3>Pie is tasty Mmmmm...</h3> </div>
</div>
</div>
</div>
</div>
#body{
text-align: center;
}
#header {
padding-bottom: 50px;
text-align: center;
}
#main{
margin: 0 auto;
text-align:left;
width: 770px;
}
.column{
float:left;
padding-left: 10px;
}
.column:first-child {
padding-left: 0px;
}
.box1{
border: dotted;
border-color: gray;
padding: 2px 5px 2px 5px;
max-width: 250px;
text-align: center;
}
img.smart{
margin-left: auto;
margin-right: auto;
}
wrap each image and the coresponding text in one container and set float:left in the css. get rid of the #textboxes div. then center your #main div by setting it to the width of all the images (plus padding - if desired).
see example fiddle with all the code:
http://jsfiddle.net/QLvt7/4/