On my page, I use two col-sm-6 blocks inside a containter, to display two blocks beside each other.
In the right block I added a image, with position absolute, so that I can place it at the righ of the screen.
But I want to let the image fall behind the max page width, so that the image is dispayed for only 3/4, but now it is on top of it and make the page larger.
How can I let the image fall behind the max page width, so that horizontal scrolling is not possible?
Screenshot:
HTML:
<div class="row multi-column-row" style="min-height: 643px;">
<div class="spb-column-container col-sm-6 full-image-right-block-text " style="margin-top: 0px; margin-bottom: 0px; padding: 0px; min-height: 643px;">
<div class="spb-asset-content" style="padding: 0%; margin-top: 65px; margin-bottom: 65px;">
<section class="container "><div class="row">
<div class="spb_content_element col-sm-12 spb_text_column mt0 mb0">
<div class="spb-asset-content" style="margin-top: 0px;margin-bottom: 0px;border-top: 0px default ;border-left: 0px default ;border-right: 0px default ;border-bottom: 0px default ;padding-top: 0px;padding-left: 0px;padding-right: 0px;padding-bottom: 0px;">
<h4> Title </h4>
<h5>Title</h5>
<p>Text</p>
</div>
</div> </div></section>
</div>
</div>
<div class="spb-column-container col-sm-6 full-image-right-block " style="margin-top: 0px; margin-bottom: 0px; padding: 0px; min-height: 643px;">
<div class="spb-asset-content" style="padding:0%;">
<section class="container "><div class="row">
<div class="spb_content_element spb_image noframe col-sm-12 thumbnail-gallery-standard square-corners">
<div class="spb-asset-content"><figure class="clearfix" style="width:1050px;margin:0 auto;">
<div class="img-wrap"><img width="2148" height="1255" src=""></div><div class="figcaption-wrap"></div></figure>
</div>
</div> </div></section>
</div>
</div> </div>
Related
On the Page: jerkydirect.com/base/opportunity - There are 3 boxes within the container with the picture. However, when viewed on a Large Screen - the last box sticks over the right side.
It looks great in a smaller window or mobile but not on a larger screen.
How do i get this to align correctly?
Here is the code:
<section class="plan-box opportunity">
<div class="container">
<div class="row">
<h2>Choose Your Crave:</h2>
<div class="col-xs-12 col-sm-12 col-md-12">
<center>
<div class="package">
<h3>Twin Pack</h3>
<p>2 BAGS</p>
<ul>
<li><span>Affiliate Price: </span><span>$19.75</span></li>
<li><span>Retail Price:</span><span>$21.75</span></li>
<li><span>Commission Payout:</span><span>$5.00</span></li>
</ul>
</div>
</center>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<div class="package">
<h3>family Pack <span></span></h3>
<p>4 BAGS</p>
<ul>
<li><span>Affiliate Price: </span><span>$39.50</span></li>
<li><span>Retail Price:</span><span>$41.50</span></li>
<li><span>Commission Payout:</span><span>$10</span></li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<div class="package">
<h3>Party Pack <span></span></h3>
<p>10 BAGS</p>
<ul>
<li><span>Affiliate Price: </span><span>$79.75</span></li>
<li><span>Retail Price:</span><span>$87.75</span></li>
<li><span>Commission Payout:</span><span>$15</span></li>
</ul>
</div>
</div>
</div>
</div>
</section>
Your HTML code is fine.
Problem lies with your CSS
.package {
width: 350px;
height: 230px;
background-color: rgba(0,0,0,0.6);
border: 15px solid rgba(52,53,48,0.6);
margin: 50px 0 0;
padding: 25px 20px;
}
You shouldn't hard code the width with some pixel value rather remove the pixel value.
Hope this will help you.
Remove the <div class="container"></div> you already have one right after .inner-container.
And Content should be placed within columns, and only columns may be immediate children of rows.
Remove width: 350px from .package div from css.
#service-one .package {
width: auto !important;
}
Or add this style on css files
I've read 5-6 question / answers but can't find what I'm looking for _
Bootstrap 4 columns aren't behaving the way I expect them to. Below about 600px device width the edge overflows instead of continuing to reduce in size
at 618px the columns are still reducing
at 538px the columns are overflowing
HTML:
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-12">
<div class="outerDivBorder" id="photoBox">
<div style="height: 10em;"></div>
</div><!-- /#photoBox -->
</div>
<div class="col-lg-3 col-md-12">
<div class="outerDivBorder" id="dataBox">
<div style="height: 10em;"></div>
</div><!-- /#dataBox -->
</div>
</div>
</div><!-- /.container -->
CSS:
.outerDivBorder {
width: 100%;
border: 1px solid #454343;
padding: 0 1rem;
margin: 1rem;
margin-top: 1.5rem;
margin-bottom: 2rem;
}
Thanks in advance for any guidance offered on this : )
You put margin: 1rem; on .outerDivBorder, and that margin pushes content out on small screens. Use padding on cols instead - it can be done by using utility class for padding, py-3 in this case:
.outerDivBorder {
width: 100%;
border: 1px solid #454343;
padding: 0 1rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-12 py-3">
<div class="outerDivBorder" id="photoBox">
<div style="height: 10em;"></div>
</div>
</div>
<div class="col-lg-3 col-md-12 py-3">
<div class="outerDivBorder" id="dataBox">
<div style="height: 10em;"></div>
</div>
</div>
</div>
</div>
Had a similar problem. On mine it was happening because of
* {
box-sizing: inherit;
}
Bootstrap already reset that to border-box and the col's and row's behave according to that.
This is similar to the layout I'm trying to achieve:
The code I have now
<div class="row ">
<div class="col-lg-6 row-eq-height push-right">
<img src="1.jpg" class="img-responsive">
</div>
<div class="col-lg-6 row-eq-height">
<div class="eq-row-text ">
<p class="row-text">Text description for image </p>
</div>
</div>
</div>
<div class="row ">
<div class="col-lg-6 row-eq-height ">
<div class="eq-row-text ">
<p class="row-text"> Text description for the image </p>
</div>
</div>
<div class="col-lg-6 row-eq-height">
<img src="1.jpg" class="img-responsive">
</div>
</div>
I have tried using CSS class "no-padding" and also tried playing around with margins. when i apply 0 padding, the left side of the first image touches the edge of the browser( this is desired), however the other edge(right side of image) still has some empty space.
How do I get rid of that empty space get the results like the reference layout?
.col-md-6{
padding-right: 0px;
padding-left: 0px;
}
There could be an issue with the <p> padding/margin, could also be an issue with the <img> padding/margin. However it seems to be an issue with the sizing of the elements within the row.
I did however seemingly fix the issue in my PEN HERE
I added a height: *** to the row class, this may be needed for desired results as you are using row-eq-height bootstrap class.
HTML
<div class="row ">
<div class="col-lg-6 row-eq-height push-right">
<img src="1.jpg" class="img-responsive">
</div>
<div class="col-lg-6 row-eq-height">
<div class="eq-row-text ">
<p class="row-text">Text description for image </p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 row-eq-height ">
<div class="eq-row-text ">
<p class="row-text"> Text description for the image </p>
</div>
</div>
<div class="col-lg-6 row-eq-height">
<img src="1.jpg" class="img-responsive">
</div>
</div>
CSS
p{
margin: 0;
padding: 0;
}
img{
margin: 0;
padding: 0;
}
.row {
margin: 0;
padding: 0;
height:60px;
background-color: #eee
}
If using the LESS/SASS source: change #grid-gutter-width in the variables file to 0
If you want to get rid of the white space you will need to make your image bigger to span the cols. You can manually adjust the width of an image using css:
img {
width: 100%;
}
I have those 3 boxes
and I want to have some margin inbetween them. As soon as I add margin, the 3rd one goes to the next row. Here's the code:
CSS:
#hotels {
background: url('../img/PICS/19427110_ml.jpg');
background-size: 100%;
height:10px;
color:whitesmoke;
}
.contenhotelsclass {
border-radius:10px;
padding: 70px;
height: 700px;
background: rgba(0, 0, 13, 0.6);
}
.contentsfirst {
padding-top: 100px;
padding-bottom: 100px;
}
If I add
.marginyes {
margin: 0 30px;
}
The next row thing happens.
HTML:
<section id="hotels">
<div class="row">
<div class="col-md-12 contentsfirst" id="contenthotels">
<div class="col-md-4 contenhotelsclass">
<img src="{{ URL::asset('img/PICS/18911510_ml.jpg') }}" class="img-circle img-responsive"> </img>
<span><h2>{{ Str::upper($wording['training']->container) }}</h2></span>
<span style="padding-top: 100px">{{ Str::limit($wording['training']->wording , 400, '...') }}</span>
<span ><p style="padding-top: 30px;"><button id="trainbutton" class="btn btn-success">Read more!</button></p></span>
</div>
<div class="col-md-4 contenhotelsclass marginyes">
<img src="{{ URL::asset('img/PICS/20360155_m.jpg') }}" class="img-circle img-responsive"> </img>
<span><h2>{{ Str::upper($wording['taste']->container) }}</h2></span>
<span style="padding-top: 100px">{{ Str::limit($wording['taste']->wording ,400,'...') }}</span>
<span><p style="padding-top: 30px;"><button id="eatbutton" class="btn btn-success">Read more!</button></p></span>
</div>
<div class="col-md-4 contenhotelsclass">
<img src="{{ URL::asset('img/PICS/31786072_ml.jpg') }}" class="img-circle img-responsive"> </img>
<span><h2>{{ Str::upper($wording['relax']->container) }}</h2></span>
<span style="padding-top: 100px">{{ Str::limit($wording['relax']->wording ,400,'...') }}</span>
<span><p style="padding-top: 30px;"><button id="relaxbutton" class="btn btn-success">Read more!</button></p></span>
</div>
</div>
</div>
</section>
I'm using bootstrap 3.
How could I solve this?
there is a solution.
change your DOM
old:
<div class="col-md-4 contenhotelsclass">
........
</div>
new:
<div class="col-md-4">
<div class="contenhotelsclass">
.....
</div>
</div>
add following css:
.contenhotelsclass {margin:0px 10px;}
jsFiddle http://jsfiddle.net/mp9napL3/1/
Firstly, I don't understand why you use margin: 0 30px;, I usually use just margin:30px;.
Secondly, the answer is that you have so much spacing between your boxes, your browser just puts the last box on the next line. Use a wider browser and your 3rd box won't go on the next line.
It is obvious, you are using col-md-4 means 25% of parent and when you set extra margin your div covers greater than 25%, the only way is to override col-md-4 class and reduce width from 25% to less.
So, I'm trying to get this to display properly on mobile phone for the class 'circle-right right' div. Right now, instead of being centered, the circle-right class is displaying too far to the right instead of center. On desktop it displays correctly.
<div class="path-container">
<div class="row">
<div class="large-12 columns ">
</div>
</div>
<div class="row path-item">
<div class="large-7 push-5 columns">
<div id="img1" class="circle circle-left "></div>
</div>
<div class="large-5 pull-7 columns path-text left">
<h3 id="pstop1">Get in touch!</h3>
<a class="pathlinks" href="#" data-reveal-id="myModal">Get in touch>></a>
</div>
</div>
<div class="row path-item">
<div class="large-7 columns">
<div id="img2" class="circle circle-right right"></div>
</div>
<div class="large-5 columns path-text right">
<h3 id="pstop2">Give us feedback!</h3>
<p class="shadow">We're not happy unless your satisfied. During the process, we'll be in touch to make sure we're on the right track.</p>
Get in touch>>
</div>
This is most of the default css that comes with the foundation path template. Tried using media query to select the class and adjust the position, but it wont work. Here's a link to the template http://patterntap.com/code/responsive-timeline
css:
.path-container .path-item .circle.circle-right {
right: 100px;
}
.path-container {
text-align: center;
}
.path-container .circle {
top: 0;
right: 0;
left: 0;
float: none;
margin-bottom: 30px !important;
margin-top: 60px;
margin-left: auto;
margin-right: auto;
}