Im using Bootstrap. I display 3 divs next to each other. The Problem is so smaller the screen gets so more unorganized the thing get.
I uploaded my codepen so you can see it:
http://codepen.io/involvex/pen/qRXajN
Open it in Fullscreen it actually looks good
I just changed the text
No it doesn’t. It doesn’t make any sense at all. I can’t imagine real content in this page and how it would look or work.
Why don’t you make some pseudo-screenshots showing what you wish the thing to look at different widths and heights.
Have you read the bootscrap instruction manual?
It should look like this:
but on phones it sucks
Hi lukaswill97 welcome to the forum
I added outline in hopes of understanding what your question is, but I’m at a loss.
I see this with everything as maximized as I could get them.
EDIT.
OK, now I see. Without the image the height was collapsing.
What do you want it to look like on phones???
it should be the 3 tables but not next to each other instead of that box 1 should be on the top, the 2nd box under the the first and the 3 one under the 2nd
How does the bootstrap manual tell you to do that?
You DO have to use the appropriate Bootstrap rules and code… I can’t help you with Boottraps. Someone else will be along later who can do that. I feel very sure that the manul explains how to code a responsive site, since that is one of Booties claims to fame, but it requires learning the rules of the framework.
I just took another look at the codepen. It DOES change to a single column layout at smartphone widths but the contents are wonky. Can you add your images to the codepen?
I’m’ trying to get closer to an understanding of how this page is supposed to look at different widths. Perhaps more realistic content would help, or is the google image it?
What are the dimensions of the google image? Can you include it as an attachment to your next post?
Hi, as you probaly know with bootstrap you have 1 row that can include up to 12 columns.
So, if you want 3 rows you’ll need to divide 12 by 3 =4 which will give you 3 equal columns.
<div class="row">
<div class="col-md-4">
<h2>CONTENT BOX 1</h2>
</div>
<div class="col-md-4">
<h2>CONTENT BOX 2</h2>
</div>
<div class="col-md-4">
<h2>CONTENT BOX 3</h2>
</div>
</div>
I’m not sure how the view height works with Bootstrap. I normally just match up the height of my content as best I can.
Hope that helps
it looked better when i just used 3 with 4 there is no space between the boxes
i just added some images there
Thank you but this isn’t working for me. You posted an image showing something that your code does not render.
Add this line of CSS to your code and see if it gets you closer to a solution:
.divinhalt {overflow:hidden;}
Floats need to be cleared. {overflow:hidden} is a technique for clearing the floats.
and take the other inline styles out of the HTML and put them in CSS, bitte.
How the real content behaves is still unknown to me.
3 Likes
Lucas, It works if you have the Bootstrap CSS Column Styles installed. It takes care of everything column related. You don’t need any floats, but you may want to adjust the padding.
If you don’t have the Bootstrap CSS Column Styles installed you can get a copy here at Bootstrap Customize.
3 Likes
.divinhalt {overflow:hidden;}
This litte thing fixed it.
THank you very much.
Edit:
I got one more question. Normally My navbars work on mobiles, but this time the “Menu button” that bootstrap comes with doesnt work.
http://codepen.io/involvex/pen/RKZpwK
I mean this part doesnt work:
Glad you got it resolved. And, I learned something as well. Thanks @ronpat, I didn’t know that overflow:hidden; clears floats.
2 Likes
The code that you posted does not render anything useable on my PC.
I don’t think it includes URLs to all of the needed resources. The CSS in the pen doesn’t seem to be relevant.
The <body> tag should go around everything below the </head> tag, including the nav bar. It should not be around the PHP call only.
I don’t think the PHP is necessary to this pen, but if it is, we need to see the HTML that it brings to the page. The PHP itself is useless.
As I mentioned earlier, a person more knowledgable with bootstrap will be along later.
2 Likes
i fixed it myself looked like it misssed some scripts
1 Like
You can’t really make your own rules up with the grid system as that means you aren’t using the grid properly. You may as well discard the grid and just do it manually.
The grid column classes need to add up to 12 so for 3 across you need to use the classes that have 4 on the end (3 x 4 = 12) (e.g. col-sm-4).
In your example you have magic numbers trying to counteract the grid where you have changed the margins on the column classes (you should rarely ever do this) and you have used a magic 107% for the width which is again nonsense as far as the grid is concerned.
The grid creates gutters with padding and offsets the padding start and end with negative margins on the rows. Therefore you should not mess about with the widths or the margins on columns but use only bootstrap classes and methods to arrange them.
If you want borders on the columns then you apply the border to an inner wrapper instead and not the column itself as all columns touch but have gutters made of padding (not margin). Therefore for 3 elements across with borders and a gutter between simply add the border to an inner wrapper instead and all will be fine.
You must follow the rules of the grid exactly and your example is missing the container wrapper which must always be in place.
Also stop fixing heights as that is bad for containers that hold fluid content like text. You rarely need to add a height to containers as it is the content that should dictate the height.
Take a while to revise and read the css grid rules otherwise you will constantly run into these issues.
Your codepen rules could be reduced to this.
.divinhalt {
background-color: #9999FF;
border-style: solid;
font-size: 20px;
overflow:hidden;
}
.urlinbox {
text-decoration: none;
color: black;
}
.urlinbox:hover {
text-decoration: none;
color: black;
}
.inner{border:2px solid #000}
Here is the html although I haven’t tidied this code up but just used an nner element for the text and reverted to the correct column classes for the content.
<div class="container">
<div class="row">
<div class="col-sm-4 boxes_incl">
<!-- Nummer 1 -->
<a href="#" class="urlinbox">
<div class="divinhalt" width="100%">
<div style="float: left; font-size: 100px;">1</div>
<p style="text-align: center;">
Test - Test.de
<br>
<img src="https://i.vimeocdn.com/portrait/58832_300x300" width="10%"></img>
<br> Test Example.
</P>
</div>
</a>
<!--Nummer 2 -->
<a href="#" class="urlinbox">
<div class="divinhalt" width="100%">
<div style="float: left; font-size: 100px;">2</div>
<p style="text-align: center;">
Test - Test.de
<br>
<img src="https://i.vimeocdn.com/portrait/58832_300x300" width="10%"></img>
<br> Test Example.
</P>
</div>
</a>
<!-- Nummer 3 -->
<a href="#" class="urlinbox">
<div class="divinhalt">
<div style="float: left; font-size: 100px;">3</div>
<p style="text-align: center;">
Test - Test.de
<br>
<img src="https://i.vimeocdn.com/portrait/58832_300x300" width="10%"></img>
<br> Test Example.
</p>
</div>
</a>
<!-- Nummer 4 -->
<a href="#" class="urlinbox">
<div class="divinhalt">
<div style="float: left; font-size: 100px;">4</div>
<p style="text-align: center;">
Test - Test.de
<br>
<img src="https://i.vimeocdn.com/portrait/58832_300x300" width="10%"></img>
<br> Test Example.
</p>
</div>
</a>
<!-- Nummer 5 -->
<a href="#" class="urlinbox">
<div class="divinhalt">
<div style="float: left; font-size: 100px;">5</div>
<p style="text-align: center;">
Test - Test.de
<br>
<img src="https://i.vimeocdn.com/portrait/58832_300x300" width="10%"></img>
<br> Test Example.
</p>
</div>
</a>
</div>
<!-- Ende Box 1 -->
<!-- Start Box 2 -->
<div class="col-sm-4 boxes_incl">
<!-- Nummer 1 -->
<a href="#" class="urlinbox">
<div class="divinhalt" width="100%">
<div style="float: left; font-size: 100px;">1</div>
<p style="text-align: center;">
Test - Test.de
<br>
<img src="https://i.vimeocdn.com/portrait/58832_300x300" width="10%"></img>
<br> Test Example.
</P>
</div>
</a>
<!--Nummer 2 -->
<a href="#" class="urlinbox">
<div class="divinhalt" width="100%">
<div style="float: left; font-size: 100px;">2</div>
<p style="text-align: center;">
Test - Test.de
<br>
<img src="https://i.vimeocdn.com/portrait/58832_300x300" width="10%"></img>
<br> Test Example.
</P>
</div>
</a>
<!-- Nummer 3 -->
<a href="#" class="urlinbox">
<div class="divinhalt">
<div style="float: left; font-size: 100px;">3</div>
<p style="text-align: center;">
Test - Test.de
<br>
<img src="https://i.vimeocdn.com/portrait/58832_300x300" width="10%"></img>
<br> Test Example.
</p>
</div>
</a>
<!-- Nummer 4 -->
<a href="#" class="urlinbox">
<div class="divinhalt">
<div style="float: left; font-size: 100px;">4</div>
<p style="text-align: center;">
Test - Test.de
<br>
<img src="https://i.vimeocdn.com/portrait/58832_300x300" width="10%"></img>
<br> Test Example.
</p>
</div>
</a>
<!-- Nummer 5 -->
<a href="#" class="urlinbox">
<div class="divinhalt">
<div style="float: left; font-size: 100px;">5</div>
<p style="text-align: center;">
Test - Test.de
<br>
<img src="https://i.vimeocdn.com/portrait/58832_300x300" width="10%"></img>
<br> Test Example.
</p>
</div>
</a>
</div>
<!-- Ende Box 2 -->
<!-- Start Box 3 -->
<div class="col-sm-4 boxes_incl">
<div class="inner">
Text
</div>
</div>
<!-- Ende Box 3 -->
</div>
</div>
Using a framework means you have to follow the framework rules but you also need to understand the css that goes with it. Read the instructions and understand why and how the grid works and why you should not change certain things.
4 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.