i like to width: 100% for my text div. But i don't know why this not working.
So if i have small description text i have not full width by my list div and if i have long description text so i have 100% width div.
Here my screeny Problem:
DEMO SITE
Here my HTML:
<div class="columns events_list_even margin_padding_clean">
<div class="event_list_abstand">
<div class="two columns padding_right_left_clean">
<div class="date-list"><i class="fa fa-calendar fa-lg" style="margin-right: 10px"></i>Mo. 14.04.2014 </div>
<img src="http://www.davis-design.de/marktadresse/files/floh_troedel_jahrmarkt.png" class="category_icon">
<img src="http://www.davis-design.de/marktadresse/layout/images/veranstaltung_halbwegs_ueberdachung.png" class="roof">
</div>
<div class="ten columns margin_bottom_clean padding_right_left_clean">
<h2 class="date-ueberschrift" style="border-bottom: none;">Abendmarkt Osnabrueck</h2>
<div class="date-info"> Albrechtstraße 15 | 49076 Osnabrück |
Floh-, Trödel- & Jahrmarkt</div>
<p class="margin_bottom_clean">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...</p></div></div></div>
Add "width:100%" in your class(event_list_abstand).
Add this to your css
div.columns.events_list_even.margin_padding_clean {
width: 100%;
}
columns {
-moz-box-sizing: border-box;
width: 100%;
}
Make the above mentioned changes in the responsive.css at line number 5,to get the div with full width
According to your CSS, to target only the white and grey boxes, try:
.loop-posts .events_list_even{
width:100%;
}
Related
I am using latest version of bootstrap and have a design with 2 columns where the first column should contain some text and the second column should contained a background image which fills the whole column up to the users right screen. I want the background image to go outside the column to the right, until it reaches the edge of the browser.
like this:
how can i make second column to go outside the container? That's what i am currently using which is not working (image gets cut off by container)
<div class="container">
<div class="row">
<div style="" class="col-sm-12 col-lg-6">
<p>Example text</p>
</div>
<div class="col-sm-12 col-lg-6 bg-image" style="background-image:url('http://placehold.it/1800x1045');">
</div>
</div>
</div>
Try adding a contain value to the background image.
style="background-image: url('http://placehold.it/1800x1045'); background-size: contain;"
You can create the main container as "container-fluid" to fill the entire page content and then create the columns, one other container with your text and the other with the image, check the code below, ignore the height and the borders because I was trying to create your scenario:
<html>
<head>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid" style="height: 500px;">
<div class="row h-100">
<div class="col-sm-6" style="border: 1px solid pink;">
<div class="row">
<div class="container">
<div style="border: 1px solid blue;" class="col-sm-6 col-lg-6">
<p>Example text</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-6 no-gutters bg-image" style="background-image:url('https://dummyimage.com/600x400/666/fff'); border: 1px solid red;">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>
What you are trying to do is not contemplated by Bootstrap, but you can use a workaround. Why it is not contemplated? Because for a 2 column layout, it uses up 50% of the div, and you are not asking for a 50/50 layout.
First of all, the container, fluid or not, doesn't entirely touch the side of the page. Also, in both cases it is symetrical, and your design is not.
So... what you want to do is a greater div that occupies 100% of the page, with a container (fluid or not) in it. With absolute positioning, you create another div that occupies 50% of the greater div, and has the image as background.
.greater-container {
position: relative; //needed so that the .image-container can be properly positioned
}
.image-container {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
right: 0;
background-color: green;
background-image: url('http://placekitten.com/g/1800/1045');
background-size: cover;
z-index: 0;
}
.content-column {
border: 1px solid red; //so that we can see it
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="greater-container">
<div class="image-container"></div>
<div class="container">
<div class="col-sm-6 content-column">
Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet.
</div>
</div>
</div>
As a sidenote, this is not an easy layout for a responsive website. That background-image will get resized a lot and will probably not always work well.
Hi i'm sure this has been answered but i can't seem to find what i'm looking for. I would like to have a container with a max-width and margin auto and then inside two divs floated next to each other (both taking 50% of the container) but the one on the right bleeds out the container right to the edge of the viewport?
As below with the dotted white line being the container and the black the browser.
[example here][1]
edit - sorry i forgot to mention the divs need to both be the same height, so if the left has less content than the right it needs to still be the same height as the right, much like if i made them table-cell's.
.container {
margin-left: auto;
margin-right: auto;
max-width: 1260px;
}
.table{
display:table;
table-layout: fixed;
width:100%;
.left, .right{
display:table-cell;
vertical-align: top;
width:50%
}
}
html
<div class="container">
<div class="table">
<div class="left">
content
</div>
<div class="right">
content
</div>
</div>
</div>
I have tried adjusting it based on this answer but it stacks
http://jsfiddle.net/gxG4W/2/
You should try bootstrap for this.
I hope this will help you.
Check out this by maximizing browser window.
Bootstrap Column
.container {
border: solid;
}
h4 { margin-bottom: 30px; }
.row {
margin-bottom: 20px;
}
.row .row {
margin-top: 10px;
margin-bottom: 0;
}
.left-div
{
border: solid red;
}
.right-div
{
border: solid green;
}
<div class="container text-center">
<div class="row">
<h4>Two Columns</h4>
<div class="col-lg-6 col-md-6 left-div">
<p>
test div
</p>
<p>
test div
</p>
<p>
test div
</p>
<p>
test div
</p>
<p>
test div
</p>
<p>
test div
</p>
<p>
test div
</p>
<p>
test div
</p>
<p>
test div
</p>
<p>
test div
</p>
</div>
<div class="col-lg-6 col-md-6 right-div">
<p>
test div
</p>
<p>
test div
</p>
<p>
test div
</p>
<p>
test div
</p>
<p>
test div
</p>
</div>
</div>
</div>
ok i've pretty much fixed this myself now, i'm not sure if its the best way to do it and it doesn't make the div's equal height as with the table trick, so i will need to us js to do that i guess. But here is my solution.
<div class="container">
<div class="left">
Lorem ipsum dolor sit amet
</div>
<div class="right">
Lorem ipsum dolor sit amet
</div>
</div>
css
.container{
max-width:500px;
margin:0 auto;
background:red;
padding:10px 0;
}
.container::after{
content:" ";
clear:both;
display:block;
float:none;
}
.left{
float:left;
width:50%;
background:green;
}
.right{
background:blue;
width:50vw;
margin-left:50%;
}
https://jsfiddle.net/shbkxcgw/4/
Every other div is centered but this one. And it's been driving me nuts for a few hours. I finally broke down and posted. Attached is a pic where you can see it's not centered.
You can see it live here.
Image of div not centered:
You can use bootstrap helper classes .center-block and .text-center to center the content
<div class="col-md-6">
<div class="testimonial-section center-block">
Denim you probably haven't heard of. Lorem ipsum dolor met consectetur adipisicing sit amet, consectetur adipisicing elit, of them jean shorts sed magna aliqua. Lorem ipsum dolor met.
</div>
<div class="testimonial-desc text-center">
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" alt="">
<div class="testimonial-writer">
<div class="testimonial-writer-name">Zahed Kamal</div>
<div class="testimonial-writer-designation">Front End Developer</div>
Touch Base Inc
</div>
</div>
</div>
You need to add the following:
.testimonial-section {
margin: 0 auto;
}
.testimonial-desc {
text-align: center;
}
Optionally, you can add the following:
.testimonial-section:after {
margin-left: 5px;
}
which will make it:
If I understand you right, you want each testimonial centered in its containing div? How about adding margin-left: 25%; to both .testimonial-section and .testimonial-description?
Try this:
.testimonial-section {
margin: 0 auto; }
This is what I want to do with BS3:
My beautiful schema :)
And this is my start code:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="well well-sm">
<i class="glyphicon glyphicon-th-large pull-left"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque molestias nihil quia!</p>
</div>
</div>
</div>
</div>
JsFiddle URL - http://jsfiddle.net/AJAhR/54/
I tried with line-height but it must be responsive so it doesn't work.
Someone can explain me how to do that with CSS/Boostrap3.
Try something with position absolute
.well.well-sm p { margin-left: 60px; /* with of the icons + icon's padding right */ }
.well.well-sm { position: relative; }
.well.well-sm i { position: absolute; top: 50%; left: 0; margin-top: -50px; /* 50% of the icon's height */ }
Live: http://jsfiddle.net/AJAhR/55/
hi I am trying to have a thumbnail at the button of my picture, but it goes out of the whole span that I have here is my code here is the whole code http://jsfiddle.net/dP4eL/
I am using twitter bootstrap
<div class="tab-content">
<div class="tab-pane fade in active" id="home"><div class="container">
<div class="row">
<ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<img src="Hydrangeas.jpg" alt="product 1">
<div class="caption">
<h5>Product detail</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<br>
<div class="span1">
<div class="thumbnail"><img src="Hydrangeas.jpg" alt="image">
fav
</div>
</br>
</div>
</p>
</div>
</div>
</li>
Thank you
Your question is kinda hard to understand - i guess you do want that little "image / Favbutton"-Box to remain in its parent-div?!
Bootstrap should use the floats in the right way so, try to add to your .thumbnail-class:
.thumbnail { overflow: hidden; }
If that´s what you want to achieve.
It's hard to tell from the limited code you have there, but if you would like a div to cut off extra content you can set a width and height for it and set it's overflow to hidden like so:
.span1 {
width: 100px;
height: 100px;
overflow:hidden;
}
Just change the width and height to your specifications.
Your problem is that the class span has the property float: left. Float removes the element from the float of the document.
[class*="span"] {
float: left;
}
You have multiple instances of this css in your .. css declarations. The way I see it, you have two options.
Either delete float: left from all instances, or apply a clearfix css class to your elements. This will ensure your div remains in the flow of your document, and your parent div expands to contain it.
I would create a demo for you, but there is so much css in your js fiddle that js fiddle cannot parse it at a reasonable speed.
remove your float:left setting for your span. If you aren't happy about that then try using table :D