Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
On this page of my website, the divs are floating in a strange way. The original theme (http://demo.fabthemes.com/revera/portfolio/) displays them in a correct way. I've checked the code + css but cannot seem to find the problem.
What is going wrong here?
Just set the min-height:
article.post, article.page, section.error-404 {
margin-bottom: 40px;
min-height: 240px;
}
The fact that your label stretches onto two lines makes it unhappy.
Consider making the h3 a fixed height, or adding elements with clear:both; after every fourth item.
The height is not always the same. Do this:
article.post, article.page, section.error-404 {
margin-bottom: 40px;
min-height: 300px; <----
}
Because some of the titles are in two lines, therefor, the height of blocks is not same. You can set this css to force them stay in one row:
.portbox h3 {
height: 1em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
You can also set the fixed height for h3 that can hold 2 rows (or maximum you may have).
You need nest every 4 columns in a div.row
<div class="row">
<article class="col-sm-3 col-6 portbox post">... </article>
<article class="col-sm-3 col-6 portbox post">... </article>
<article class="col-sm-3 col-6 portbox post">... </article>
<article class="col-sm-3 col-6 portbox post">... </article>
</div>
<div class="row">
<article class="col-sm-3 col-6 portbox post">... </article>
<article class="col-sm-3 col-6 portbox post">... </article>
<article class="col-sm-3 col-6 portbox post">... </article>
<article class="col-sm-3 col-6 portbox post">... </article>
</div>
Related
I'm creating a div that needs to have two columns, each one with justified alignment. Problem is: it looks good when I use two divs bootstrap col-lg6- , but when it comes to col-md-6, col-sm-6, it results in a lot of spaces between words in order to maintain the justified alignment when dealing with different sized words.
https://imgur.com/a/Fm4gSMB [link for image samples]
1) I've already tried using pure CSS:
#third-div{
background-color: #904e45;
text-align: justify;
column-count:2;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}
2) tried to use word-break: break-all;
but ofc this breaks the words with no grammatical logic.
3) Now I'm trying to use two Bootstrap cols inside a bootstrap row, like:
<div id="third-div" class="page-div">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<h1>Lots of text</h1>
<h2 class="fio">But divided: two columns</h2>
<p> a lot of text here </p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<p> a lot of text here </p>
</div>
</div>
</div>
.page-div{
padding: 15%;
padding-left: 15%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#third-div{
background-color: #904e45;
text-align: justify;
}
That's the way as text-align: justify works. It appends equal space between words to keep the text justified, if you fix it it wouldn't be justified anymore.
I think the solution is keeping one column on a small screen
<div id="third-div" class="page-div">
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12">
<h1>Lots of text</h1>
<h2 class="fio">But divided: two columns</h2>
<p> a lot of text here </p>
</div>
<div class="col-lg-6 col-md-12 col-sm-12">
<p> a lot of text here </p>
</div>
</div>
</div>
This way they should go under each other like a single column and there would be enough space to optimize the justifying the text.
In some browsers (FireFox) you can set the justification the spacing to use letter spacing (acts similar to adjusting kerning in software like In-Design) instead of the default word spacing. I think it looks better for some text in narrow columns.
See CSS-tricks' Text-Justify
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Issue
I finally found an easy way of vertical aligning div elements and any other type of element, using the CSS properties/values display:flex; align-items: center. Only issue now is that the Boostrap grid system i.e. col-*-12 doesn't work. If I set a div to expand 12 columns when on a small screen, it doesn't react, in less I remove the styling used for vertically aligning the items.
Aim
To be able to use the grid system and vertically align elements. Any idea why display: flex is preventing the grid from working?
HTML
<div class="header-container padding-top--sm padding-bottom--sm">
<div class="row" style="display:flex;align-items:center">
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="#" alt="logo">
</div>
<div class="col-xs-12 col-sm-6 col-md-6 text-md-center">
<p class="txt--white no-margin-bottom h-thin"> Lorem Ipsume, lorem ipsum</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 text-md-right">
<span class="txt--white">support#support.com</span><br>
<span class="no-margin-bottom txt--white">001111111111 (8am - 8pm GMT)</span>
</div>
</div>
</div>
CSS
.padding-top--sm { padding-top: 1rem; }
.padding-bottom--sm { padding-bottom: 1rem; }
.header-container {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
width: 90%;
}
The reason is because you are not letting your row "wrap" its contents.
By default its is set to nowrap value which means it does not allow the content to extend the container.
Try adding flex-wrap: wrap; property to your row style
<div class="row" style="display:flex;align-items:center;flex-wrap: wrap;">
...
</div>
Codepen here
PS: Consider avoiding inline styles, use external or atleast internal styles as much as possible
I was looking to make a striped business theme, similar to the one created by W3Schools. The theme can be found here. It is characterized by horizontal sections, separated by different background colors.
The one issue I had with it was that the columns in Services, Portfolio and Pricing, spanned pretty much the full width of the page, which I did not think looked great, particularly for the three pricing boxes, which i feel should be much narrower and still centered. Let's take those pricing boxes as the example for the purpose of the questions.
So, I embarked upon the task of squeezing these three pricing boxes into a narrower shape, centered on the page, while still maintaining the full-width alternating background color. I came up with three ways to do it:
1) Place a Container inside a Container-Fluid:
<div id="pricing" class="container-fluid">
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-12">
BlaBlaBla
</div>
...
</div>
</div>
</div>
2) Make the following additions/changes to the css and html:
.fixed-width {
display: inline-block;
float: none;
width: 300px;
}
.row-centered {
text-align: center;
}
-
<div id="pricing" class="container-fluid">
<div class="row row-centered">
<div class="col-sm-4 col-xs-12 fixed-width">
BlaBlaBla
</div>
...
</div>
</div>
3) 3x col-sm-2, with empty columns on each side
Keep the container-fluid layout, but instead of having three col-sm-4, I have an empty col-sm-3, three col-sm-2, and finally an empty col-sm-3 (for a total of 12 columns).
4) 3x col-sm-2, with offset-3 to center
Instead of having three col-sm-4, I have one col-sm-2 col-sm-offset-3, then two col-sm-2 (this does not add to 12, but i center with offset).**
The problem with both (3) and (4) is that once i shrink the browser window, the boxes become too small before they wrap to the next line (i.e. the text flows out of the box). In (4) it seems if i use container (as opposed to container-fluid), the boxes become too narrow in full-screen even.
What is the correct way of doing this? I assume this is an issue almost everyone making business websites stumbles across, yet I was not able to find the answer online having worked on it for hours.
Thanks in advance,
Magnus
Below follows what I think is the best way to solve this. I will divide it up in whether or not it is a background image or color we are looking to apply accross the full width.
CSS (formatting for illustration purposes and fixed width)
.content{
padding:20px;
border: 1px solid #269abc;
background:#d6ec94;
}
[class*="col-"] {
padding-top:10px; /* 15px side paddings automatically applied */
padding-bottom:10px;
border: 1px solid grey;
background: transparent;
}
.fixed-width {
display:inline-block;
float:none;
width: 300px;
}
The key here is the fixed-width class, and follows your approach (2). The other styles are just so you can try it and easily see how it works.
CSS (background image)
#one {
background-image: url([insert-url]);
background-repeat: no-repeat;
background-size: contain;
height:500px;
}
The key here is the background-size: contain element. As long as the width/height ratio of your background image is larger than the section's ratio, the image will fill the full background.
CSS (background color)
#two {
background-color: grey;
height:500px;
}
background-color works without any tweaks.
HTML
<section id="one">
<div class="container">
<div class="row text-center">
<div class="col-sm-4 fixed-width">
<div class="content">HERE</div>
</div>
<div class="col-sm-4 fixed-width">
<div class="content">HERE</div>
</div>
<div class="col-sm-4 fixed-width">
<div class="content">HER</div>
</div>
</div>
</div>
</section>
As seen, by adding a <section> around the container, you can apply the background image or color to the full width of the page.
IN Bootstrap,
Col-lg is large screen,
Col-sm is small screen,
Col-md is medium devices,
Col-xs is Small screen.
According to the browser ,we can use the all classes.In my experience we can use the col-lg-offset-3 for large screen,Remaining screen we should use without offset,like us,
UL list format:
<style>
ul{
margin:0;padding:0;
text-align:center;
}
ul li
{
display:inline-block;
text-align:center;
width:300px;
}
</style>
<ul>
<li>box1</li>
<li>box2</li>
<li>box3</li>
</ul>
whatever screen all list will come in center position of screen.
other format:
<div class="container">
<div class="row text-center">
<div class="col-lg-offset-3 col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div>
<div class="col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div>
<div class="col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div>
</div>
</div>
we should use all classes to our business requirement.if we can alter-ate the various offset class for col-sm-offset-,col-md-offset.,
<div class="col-sm-4 col-xs-12">
Is the important line. The col-sm-4 is saying on small screens and above, take up 4 of 12 bootstrap columns. So, try decreasing this to 3 of 12 bootstrap columns, i.e. col-sm-3. Here it is within the example source code:
<div class="col-sm-3 col-xs-12">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Basic</h1>
</div>
<div class="panel-body">
<p><strong>20</strong> Lorem</p>
<p><strong>15</strong> Ipsum</p>
<p><strong>5</strong> Dolor</p>
<p><strong>2</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div class="panel-footer plan">
<h3>$19</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I've got this html here:
#books {
margin-top: 4rem;
}
<div class="row">
<div class="col-lg-10 col-lg-offset-1 well">
<h1 class="text-center">Brian Jacques</h1>
<h3 class="text-center"><i>The scribe who was an abbot to all his readers</i></h3>
<figure class="figure col-lg-12">
<div class="img-thumbnail col-lg-10 col-lg-offset-1">
<img src="http://i1378.photobucket.com/albums/ah88/ejacobosaur/Brian%20Jacques%20Cartoonized_zpsz412eynr.jpg" class="img-responsive figure-img img-fluid" alt="Brian Jacques cartoon">
<figcaption class="figure-caption text-center">Jacques smiling. A radiance that shines through his books. Painted by Derek Wehrwein. </figcaption>
</div>
</figure>
<h2 class="text-center" id="books">Widely Known For
</h2>
<div class="row">
<div class="col-lg-6 text-center">
Redwall
</div>
<div class="col-lg-6 text-center">
Castaways of the Flying Dutchman
</div>
</div>
<blockquote>
<p class="text-center lead"><em>"So here is my story, may it bring<br>Some smiles and a tear or so,<br>It happened once upon a time,<br>Far away, and long ago,<br>Outside the night wind keens and wails,<br>Come listen to me, the Teller of Tales!"</em></p>
<footer class="text-center">Brian Jacques,<cite title="Lord Brocktree"> Lord Brocktree</cite></footer>
</blockquote>
</div>
</div>
The part concerning my question is the h2 tag that is directly under the closing figure tag and has the text "Widely Know For".
I've been trying to add top margin to this element (h2) but have had no success. When I opened it up in debugger mode and select this element, it shows that its height extends almost to the top of the page instead of to the bottom of the element above it (figure).
Just to see, I took out this h2 element so that the div under it took its place. This div did not have the same problem. It had a normal height and I was able to add a top margin to it just fine.
It seems to be just the heading tag that has this problem.
I'm thinking the issue has to do with the html in some way but I have no idea why.
Here's the link to the codepen:http://codepen.io/edsonmendieta/pen/jqjRry
Help is greatly appreciated, thank you.
The problem is that you're following a floated element. You'll need to apply one technique or another to clear the float. See here.
The simplest option is probably to use Bootstrap's built-in clearing class:
<div class="clearfix"></div>
<h2 class="text-center" id="books">Widely Known For</h2>
The bootstrap class .col-lg-12 which the figure above your h2 has, has float: left;. Floated elements are not calculated into the parent element 's height.
Remove that class from the figure element - this will fix it and let you change the top margin and distance of your h2 element.
http://codepen.io/anon/pen/WwVdPO
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have 5 div's as follows:
<div class="centered" style="background-color:red;">top</div>
<div style="background-color:orange;">left</div>
<div style="background-color:yellow;">center</div>
<div style="background-color:green;">right</div>
<div class="centered" style="background-color:blue;">bottom</div>
I want to place the first one (with centered class) on the top-center, and the second (with "left" text), third (with "center" text) and the fourth (with "right" text) in one row in the center right below the top. Lastly, the fifth (with centered class) in the bottom center below the line of 3 div's.
I tried but it was just a waste of time. Can you help me with css?
Like this?
div {
height: 200px;
display: border-box;
}
.centered {
margin: 0 auto;
width: 33.33%;
}
.row {
}
.row div {
width: 33.33%;
float: left;
}
.row:after {
display: table;
content: ' ';
clear: both;
}
<div class="centered" style="background-color:red;">top</div>
<div class="row">
<div style="background-color:orange;">left</div>
<div style="background-color:yellow;">center</div>
<div style="background-color:green;">right</div>
</div>
<div class="centered" style="background-color:blue;">bottom</div>
you may want to use a framework with a grid such as Twitter Bootstrap: http://getbootstrap.com/ or Zurb Foundation: http://foundation.zurb.com/. These frameworks provide a 12 column grid to make div positioning easier to handle.
The following example is using twitter bootstraps grid to position div's in the manner you are speaking of:
<div class="container">
<div id="top" class="row">
<div class="col-md-2 col-md-offset-5">
<p>...content</p>
</div>
</div>
<div id="middle" class="row">
<div class="col-md-4">
<p>...content</p>
</div>
<div class="col-md-4">
<p>...content</p>
</div>
<div class="col-md-4">
<p>...content</p>
</div>
</div>
<div id="bottom" class="row">
<div class="col-md-2 col-md-offset-5">
<p>...content</p>
</div>
</div>
</div>
The "row" class will create a new row where the elements will be positioned sort of like hitting enter for a new line in a word document. the "col-md-2" is the bootstrap syntax for how many columns the element will take up out of the 12 column grid. Offsetting this column by 5 on both ends will subtract 10 from the number of columns and so the remaining two in the middle will be reserved for the element. This will position your div in the center. You mentioned that you wanted the second row divs to all be positioned together in the center. The code written above will give each div equal width to take up the whole length of the row across the screen. The container that is wrapped around the code will provide a padding around all of the content inside of it so it will not touch the edges of the window. I hope this helps.