Bootstrap stretch image to left viewport border

donboe · 2018-01-23 12:34:16 UTC

I am working on a website using Bootstrap. For a particular div I have the following structure (css & html):

css

.content-wrapper
{
  	display: -webkit-box;
  	display: -ms-flexbox;
  	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;	
}
.col-photo
{
  	height: 30vh;
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
  	background-attachment: fixed;
    background-position: -50% -50% !important;
    background-repeat: no-repeat;
	background-image:url(images/widget_photos/mobile/about.jpg);	
}
@media only screen and (min-width: 991px)
{
	.content-wrapper 
	{
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
	}
	.col-photo
	{
  		height: 50vh;
		background-image: url(images/widget_photos/desktop/about.jpg);	
	}	
}

html

<div class="wrapper">
	<div class="container">
    	<div class="row content-wrapper">
        	<div class="col-md-6 col-sm-12 col-photo"></div>
        	<div class="col-md-6 col-sm-12 col-text">
            	<h1>Heading</h1>
                <p>Lorem ipsum eu pri illum vocent eligendi, id ornatus albucius per. Vis elaboraret repudiandae an, at quo probo tempor recteque. Et vel graeci facete latine. Nam percipit voluptaria in, harum probatus vel cu. Per ei nisl essent dolorem, eum no tollit elaboraret. Vis id quidam error vituperatoribus.</p>
            </div>        
        </div>    
    </div>
</div>

What I would like to accomplish is that, allthough i am using a normal container, on bigger screens, col-photo will stretch all the way to the left viewport border, while at the breakpoint of max 990px, it will stretch all the way over 100%. What is the best way to do this? Thank you in advance

PaulOB · 2018-01-23 20:03:10 UTC

You'll have to come out of the grid and do something like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0
}
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
.photo-wrap {
	display: flex;
	flex-wrap:wrap;
}
.col-photo {
	height: 30vh;
	background:url(images/widget_photos/mobile/about.jpg) no-repeat fixed 50%;
	background-size: cover;
}
.col-photo, .col-text {
	flex:1 0 100%;
}
.col-text-inner {
	max-width:992px;
	padding:10px;
}
@media only screen and (min-width: 991px) {
	.col-photo, .col-text {
		flex:1 0 50%;
	}
	.col-text-inner {
		max-width:496px;
	}
	.col-photo {
		height: 50vh;
		background:url(images/widget_photos/desktop/about.jpg) no-repeat fixed 50%;
		background-size: cover;
	}
}
</style>
</head>

<body>
<div class="photo-wrap">
  <div class="col-photo"></div>
  <div class="col-text">
    <div class="col-text-inner">
      <h1>Heading</h1>
      <p>Lorem ipsum eu pri illum vocent eligendi, id ornatus albucius per. Vis elaboraret repudiandae an, at quo probo tempor recteque. Et vel graeci facete latine. Nam percipit voluptaria in, harum probatus vel cu. Per ei nisl essent dolorem, eum no tollit elaboraret. Vis id quidam error vituperatoribus.</p>
    </div>
  </div>
</div>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</body>
</html>

Assuming that's what you wanted /

donboe · 2018-01-23 20:59:45 UTC

Hi Paul. Not sure what I should do without you That is indeed nearly where I'm after. Why I mentioned Bootrap and stretching out of the div is because all of the other content on the page is wrapped in a Bootstrap container/row pair. So I would like to have the text in your example be lined up with the rest of the content on the right. To make this all a bit more visual I added an extra container along with Bootstrap cdn. Hope you understand what I mean. Here is the adjusted layout:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
html, body {
	margin:0;
	padding:0
}
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
.photo-wrap {
	display: flex;
	flex-wrap:wrap;
}
.col-photo {
	height: 30vh;
	background: url(images/widget_photos/mobile/about.jpg) no-repeat fixed 50%;
	background-size: cover;
}
.col-photo, .col-text {
	flex:1 0 100%;
}
.col-text-inner {
	max-width:992px;
	padding:10px;
	background: #9F9
}
.test1,
.test2
{
	height: 100px;	
}
.test1
{
	background: #0F0;
}
.test2
{
	background: #30F;	
}
@media only screen and (min-width: 991px) {
	.col-photo, .col-text {
		flex:1 0 50%;
	}
	.col-text-inner {
		max-width:496px;
	}
	.col-photo {
		height: 50vh;
		background: url(images/widget_photos/desktop/about.jpg) no-repeat fixed 50%;
		background-size: cover;
	}
}
</style>
</head>
<body>
<div class="photo-wrap">
  <div class="col-photo"></div>
  <div class="col-text">
    <div class="col-text-inner">
      <h1>Heading</h1>
      <p>Lorem ipsum eu pri illum vocent eligendi, id ornatus albucius per. Vis elaboraret repudiandae an, at quo probo tempor recteque. Et vel graeci facete latine. Nam percipit voluptaria in, harum probatus vel cu. Per ei nisl essent dolorem, eum no tollit elaboraret. Vis id quidam error vituperatoribus.</p>
    </div>
  </div>
</div>
<div class="test">
	<div class="container">
    	<div class="row">
        	<div class="col-md-6 test1"></div>
            <div class="col-md-6 test2"></div>
        </div>
    </div>
</div>
</body>
</html>

I hope this all make some sense

PaulOB · 2018-01-23 21:22:48 UTC

Hi, I’m on a mobile at the moment so can’t test but you should just be able to start the bootstrap code under mine. You don’t need the test stuff at that was just to check for a scroll to see what happens to the fixed image.

I set the text div to be half of the 991px width which should allow it to line up with the rest of the page but you can adjust if you have wider media queries to match.

donboe · 2018-01-24 00:36:15 UTC

Hi Paul. Thank you for the reply. Sorry for my ignorance but i don't understand the last part. What I ment has noting to do with the breakpoint because then your css is working great for that purpose. What I ment on medium to bigger screens the text div is not lining up with the rest of the content on the right. I quess that would be very difficuly because there are so many different screen sizes. Mayby there should be some right margin and padding for text container based on the Bootstrap margin and padding.

Edit: Hi Paul I have been playing around wihth it a bit viewing it on 15" and 17" laptops using Javascript to know the actual size of the Bootstrap col in different viewports and this is where I came up with:

@media only screen and (min-width: 991px) {
	.col-photo, .col-text {
		flex:1 0 50%;
	}
	.col-text-inner {
		max-width: 76.30208333333333% !important;
	}
	.col-photo {
		height: 50vh;
		background:url(http://www.donaldboers.nl/images/widget_photos/desktop/test.jpg) no-repeat 50% 50%;
		background-size: cover;
	}
}
@media only screen and (min-width: 1599px) 
{
	.col-text-inner {
		max-width: 73.125% !important;
	}	
}

and now it is lining up perfectly. Tomorrow I'm gonna have a look on even bigger screens to see if I maybe need 1 more media query. You helped me a lot. Thanks again

PaulOB · 2018-01-24 08:41:43 UTC

You only have to look at the bootstrap documentation as their breakpoints are listed. You don’t need magic numbers as the max width needed for that text element will simply be half the width of the breakpoint.

donboe · 2018-01-28 09:34:59 UTC

Hi Paul. Thanks for the reply and sorry for the late responce, but I had a bad flew for a couple of days. I see what you mean, and that is working indeed. Thanks again

system · 2018-04-29 16:35:13 UTC

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.