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; }
Related
Please guide me to bring all the "add to basket buttons" in straight line. Currently they are not in proportion.
If anyone can help me with a quick code?
How to align "add to cart" buttons in a straight line in WooCommerce shop page?
The products names (or titles) are embedded in a tag this way:
<h2 class="woocommerce-loop-product__title">Product title</h2>
So you need to define a min-height css rule for that class choosing the biggest height of your product names. So if the biggest product name height is 96 pixels, you will set your rule this way (for example):
.woocommerce-loop-product__title {
min-height: 100px;
/* OR
min-height: 100px !important; */
}
You should add this css rule to the style.css file of your active child theme (or active theme).
You can use flexbox and then the magic margin-top: auto on the button. You can ignore the display: grid on the .items container. It's just for the columns.
.items{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1em;
}
.item{
display: flex;
flex-direction: column;
}
.item button{
margin-top: auto;
}
<div class="items">
<div class="item">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
<button>Add</button>
</div>
<div class="item">
<p>Lorem ipsum dolor sit amet, consetetur </p>
<button>Add</button>
</div>
<div class="item">
<p>Lorem ipsum dolor sit amet </p>
<button>Add</button>
</div>
</div>
More information about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Yes, I know, this question have been asked many times and a possible solution is to add style="display:block;" to the link.
For some reason this solution does not work with table style DIVs:
https://jsfiddle.net/exyv8jmw/1/
HTML:
<div class="table">
<div class="tablerow">
<div class="left">
<a href="/something.html" style="display:block">
This is a link</a>
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
CSS:
.table{
width:500px;
display:table;
}
.tablerow{
display:table-row;
}
.left{
width:50%;
background:green;
display:table-cell;
padding:5px;
}
.right{
width:50%;
display:table-cell;
background:red;
padding:5px;
}
As you can see, the empty green space is clickable only horizontally, but not vertically. I also tried:
<div class="left">This is a link</div>
but it does not help.
You need to add height: 100%; to the link, .left, and .tablerow elements.
.table{
width:500px;
display:table;
}
.tablerow{
display:table-row;
height: 100%;
}
.left{
width:50%;
background:green;
display:table-cell;
padding:5px;
height: 100%;
}
.right{
width:50%;
display:table-cell;
background:red;
padding:5px;
}
<div class="table">
<div class="tablerow">
<div class="left">
<a href="/something.html" style="display:block;height:100%;">
This is a link</a>
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
First set .left position to relative, Then set a tag position to absolute and width and height to 100%.
.table{
width:500px;
display:table;
}
.tablerow{
display:table-row;
}
.left{
width:50%;
background:green;
display:table-cell;
padding:5px;
position: relative;
}
.left a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.right{
width:50%;
display:table-cell;
background:red;
padding:5px;
}
<div class="table">
<div class="tablerow">
<div class="left">
<a href="/something.html" style="display:block">
This is a link</a>
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
Can't you put the div inside the 'a' element?
<a href="/something.html" >
<div class="left">
This is a link </div>
</a>
Apply the 'left' class to the a element directly, i.e.:
this is a link
Although this does not allow for additional content, it does make the anchor fill the available space.
Part of the problem is that the anchor tag is, by default, a "span" type tag, which only fills a space as big as its content, disregarding internal divs.
You have to make the anchor tag act like a "block" style element, not its surrounding element, or an internal element.
You could add listener to the div id.
<div class="table" id="clik">
document.getElementById("clik").addEventListener("click", function(){
// document.location = "/something.html";
alert("hello");
});
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/
For example, I have a div, and some text content inside of it, like this:
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu sapien
sed massa placerat rutrum. In tristique purus eget porta pharetra.</div>
Now I want to add an icon from FontAwesome into the background, like this:
Notice that, I'd like the div to "crop" the icon a little bit, which I failed to do. Because when the icon is displayed as a block, you cannot crop it by using overflow: hidden.
Does anyone know how to achieve this effect?
You can do this using relative and absolute positions.
Here is a rough example to get you started: http://jsfiddle.net/n57uf/1/
<div class="parent">
<i class="icon-star-empty icon-4x child"></i>
<p class="content">Lorum ipsum lorum ipsum etc tect</p>
<div>
.parent {
position: relative;
border:1px solid black;
height: 200px;
width: 200px;
overflow: hidden;
}
.child {
position: absolute;
top: -15px;
left: -20px;
}
.content {
padding: 10px;
font-size: 16pt;
}
you can try the following code inside any div.
It will not interfere with other elements.
<i class="fa fa fa-microchip fa-10x" style="color: white;position: absolute;right: 10px;top: 10px;opacity: 0.3;"></i>
I came up with a solution:
<div class="wrapper">
<i class="icon-star"></icon>
<div>Lorem ipsum dolor sit amet ...</div>
</div>
and float both children to the left, and set them to have negative margins.
Update: Awww ... Jason beat me to it.
I have problem with 2 inline blocks. I want create something like this:
<img>
<span>some long text next to the img</span>
I have following structure (which I have to use):
<div class="mainContainer">
<div class="additional">
<div class="description">
<img></img>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</div>
</div>
</div>
Styles:
.mainContainer {
height: 15px; } //doesn't matter in this case
.additional {
line-height: 15px; } //doesn't matter in this case
.description {
float: left;
display: inline;
}
The problem is when I want add long text, then image is above the text, but it should be next to it.
It should be something like this (I add on code but it has to be removed):
http://jsfiddle.net/476fm/
Any suggestions?
EDIT:
Ok actually the text above was only example and to be more specific what I want achieve:
I have one main container which contains 2 inline elements:
- first element have image
- second have image too and the text
and what I wanna do is: when the text is long and need to be in second line it shouldn't be underneath the first image
http://jsfiddle.net/z2t7b/ - it should be fixed
(I hope that somebody understood what I wanna do )
Is this what you are trying to accomplish?
<div class="mainContainer">
<div class="additional">
<div class="description">
<img></img> <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</br> sed do eiusmod tempor incididunt ut labore</div>
<div class="breaker"></div>
<img></img><div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</br> sed do eiusmod tempor incididunt ut labore</div>
</div>
</div>
</div>
.mainContainer {
height: 23px;
}
.additional{
line-height: 23px;
}
.description {
float:left;
display: inline;
}
.breaker {clear: both;}
img {
background-color:#FFF;
width:20px;
height:20px;
display:inline-block;
border:solid black 1px;
float:left;
}
Here is the fiddle
Well, for INLINE elements, just remove the 'float:left' .. Natural inline flow will apply, THEN, your text will pass under normally.
OK, now i understook your quest (i hobe)
just make your container behave has a block, float it left and add overflow: hidden;
http://jsfiddle.net/NgfSF/
.description {
padding-right:10px;
float:left;
display: inline;
}
.description1 {
display: block;
overflow: hidden;
}