I'm sure of the fact that I'm doing something so wrong, I tried to solve that this morning.
Here's the deal, I'm trying to build a responsive HTML page, that will have the behaviour of the picture you see below :
So I told myself, for the elements that have to be move like the elements below "Besoin d'un devis", etc, I will use a the boostrap grid, and use for that an WYSIWIG generator. But instead, when I try to resize the window here's what happens :
Without resizing the window - Normal behaviour :
When I resize the window and I try to test the boostrap grid :
I uploaded a test version in the internet so you can see my problem.
http://test-stackoverflow.co.nf
If you need the code, I will provide it. I just don't know a way to provide a whole "test website" and a case like this in stack.
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="content_block orange size_2">
<div class="icon fa fa-car"></div>
<div class="text">Auto</div>
</div>
</div>
<div class="col-sm-3">
<div class="content_block rose size_2">
<div class="icon fa fa-home"></div>
<div class="text">Habitation</div>
</div>
</div>
<div class="col-sm-2 col-md-3">
<div class="content_block green size_2">
<div class="icon fa fa-heart"></div>
<div class="text">Santé</div>
</div>
</div>
<div class="col-sm-2 col-lg-3"></div>
</div>
</div>
Try this out
I believe you are overwriting Bootstrap's grid system here:
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="content_block orange size_2">
<div class="icon fa fa-car"></div>
<div class="text">Auto</div>
</div>
</div>
<div class="col-sm-3">
<div class="content_block rose size_2">
<div class="icon fa fa-home"></div>
<div class="text">Habitation</div>
</div>
</div>
<div class="col-sm-2 col-md-3">
<div class="content_block green size_2">
<div class="icon fa fa-heart"></div>
<div class="text">Santé</div>
</div>
</div>
<div class="col-sm-2 col-lg-3"></div>
</div>
</div>
So, the columns are set, but then your size-2 style here:
.content_block.size_2 {
height: 200px;
width: 280px;
}
will overwrite that column's width.
Remove the width styling and it should work as intended. Please comment if additional help is needed.
Your problem is that you used class container instead of container-fluid in line 110. container has a fixed width, when you decrease your browser width, it stays the same and overflows its parent element. container-fluid has a width of 100%, so it fills your parent element.
Then you also have to adapt the images to 100% width (relative to the col-3) and a appropriate height.
EDIT:
.container has not a fixed width, but your .container-main# starts shrinking immediately because of its relative width, while .container shrinks not until your browser window hits 1200px width or less.
Your .container class is set to 970px. Set it to 100%. Also change the .col-sm-3 to .col-sm-4. Why? Well you 3 items, grid systems exist out of 12, 12/3 = 4.
Also set the width of the image to 100% to prevent overlapping.
Related
I have a div and when I use the Chrome DevTools, the div (highlighted in blue) is smaller than its content. The black line shows the actual height of the div while the red line demonstrates how tall the div should be.
This is my code:
<div class="col-md-12">
<div id="survey" class="survey"></div>
</div>
I think it is caused by the flex property of my cards, but I am not sure.
use bootstrap 4 spacing m-0
<div class="col-md-12 m-0">
<div id="survey" class="survey">
</div>
</div>
Learn about bootstrap-spacing:https://getbootstrap.com/docs/4.0/utilities/spacing/
If you make the screen smaller (in width) the divs on the bottom (under 'My work') stack up on each other. I was wondering how to fix this?
See jsfiddle: https://jsfiddle.net/sxnmyjtk/
html:
<div class="tiles">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="servatius">
<p>Servatius</p>
</div>
</div>
<div class="col-md-3">
<div class="levy">
<p>Levy Consult</p>
</div>
</div>
<div class="col-md-3">
<div class="skinprove">
<p>Skinprove</p>
</div>
</div>
<div class="col-md-3">
<div class="mumc">
<p>MUMC+</p>
</div>
</div>
</div>
</div>
</div>
see jsfiddle for css
They are stacking on top of each other because you are using position absolute in your CSS. If you remove this they will then stack vertically when the width is reduced.
If you want the divs to remain side by side you can also consider using col-xs-3 instead of col-md-3.
You can add other bootstrap classes or CSS depending on what results you are tying to achieve when width is reduced.
I have a problem working with Bootstrap and Safari.
I want to place a fixed div relative to it´s parent and it works in all browsers except Safari.
The same problem is explained here:
https://github.com/lionheart/openradar-mirror/issues/147
Now i try to find a good workaround:
Original Code (does not work in Safari)
<div class="row">
<div class="col-md-8 col-md-push-4">
<div class="fixed-div">SOME FIXED CONTENT</div>
CONTENT A
</div>
<div class="col-md-4 col-md-pull-8">
CONTENT B
</div>
</div>
css:
.fixed-div{
position:fixed;
}
this does not work as expected in Safari. The "fixed-div" is not "pushed" like it`s parent. It should be displayed above "CONTENT A".
I found a solution but i think this is not a clean one:
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<div class="fixed-div">SOME FIXED CONTENT</div>
</div>
<div class="clearfix"></div>
<div class="col-md-8 col-md-push-4">
CONTENT A
</div>
<div class="col-md-4 col-md-pull-8">
CONTENT B
</div>
</div>
Do you have some better ideas how to fix this?
Try switching to the CSS property from fixed to absolute. If that does not fix your issue you could add custom check before within your HTML to see what browser a user is coming from and load that specific CSS page How to use different CSS for Different Browsers.
What i have is sidebar and on right side i have content. What i want is that both sides are in container but that are both full width . This is my demo: https://jsfiddle.net/DTcHh/19067/
So i want that left background color start from beging of page but text inside is in container and also i want that background color of right content go to the end of page but text is in container. Any suggestion?
<div class="container">
<div class="col-md-3">
<div class="left_sidebar">
menu
</div>
</div>
<div class="col-md-9">
<div class="right-content">
content
</div>
</div>
</div>
Its simple, wrap the colored containers above the container class and use two different containers:
<div class="left_sidebar">
<div class="container">
<div class="col-md-3">
menu
</div>
</div>
</div>
<div class="right-content">
<div class="container">
<div class="col-md-9">
content
</div>
</div>
</div>
Here is a working Fiddle
REMOVED other edits because EDIT 3 should do the trick best
EDIT 3
Here it is, that must be it for sure now. The trick is done with a linear gradientand a custom container above your bootstrap container.
See Fiddle
What you're asking, is by default impossible, since the .container class has a set width on different viewports and it is also horizontally "centerised" by margin:auto.
To achieve what you are trying you will have to follow a different "logic".
I would propose something like this:
<div class="left-sidebar col-md-3">
<div class="sidebar-menu col-xs-6 pull-right">
menu
</div>
</div>
<div class="right-content col-md-9>
<div class="content-text col-xs-10>
content
</div>
</div>
I propse this solution in order to stay in the same "flow" as your code. You could also, just play with paddings, which makes more sense.
use class row before col div
<div class="row">
<div class="col-md6"></div>
<div class="col-md-6"><div>
</div>
Is it possible to pad Twitter Bootstrap columns without breaking the grid? I'm building a design that is centred around 'boxes'.
I have done a fiddle of 3 examples: http://jsfiddle.net/w7zS3/1/
<div class="row">
<div class="col-xs-4 box">content...</div>
<div class="col-xs-4 box">content...</div>
<div class="col-xs-4 box">content...</div>
</div>
<hr>
<div class="row">
<div class="col-xs-4">
<div class="box">content...</div>
</div>
<div class="col-xs-4">
<div class="box">content...</div>
</div>
<div class="col-xs-4">
<div class="box">content...</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-4">
<div class="box-padded">content...</div>
</div>
<div class="col-xs-4">
<div class="box-padded">content...</div>
</div>
<div class="col-xs-4">
<div class="box-padded">content...</div>
</div>
</div>
<hr>
<div class="row box">
<div class="col-xs-6">
header: logo
</div>
<div class="col-xs-6">
header: ad banner
</div>
</div>
</div>
The first is the most semantic but adding a background colour bleeds into the padding creating the illusion of one 'box'.
Throwing another div in there with a background works well, but the text touches the edge of the box which doesn't look very nice.
On the third example i've padded the div and whilst it works it technically breaks Twitter Bootstraps design pattern... if i was to say, nest a grid it wouldn't work due to the padding up taking up space.
This also causes problems on boxes where i don't need padding (4th example on the fiddle) for instance: i'm adding a header in the first 6 columns and a banner ad in the other 6 columns.. but i want the whole header section to be in the same background color (ie.. no space between grids)... I can't add padding as it will break the grid and adding a background colour bleeds into the padding and look wider than the rest of my padded grids. (hope this bit makes sense)
Is there a correct way to get around this?
I typically use columns within columns to provide an effect similar to padding.
Instead of
<div class="col-xs-4">
<div class="box">content...</div>
</div>
Try this:
<div class="col-xs-4">
<div class="box row">
<div class="col-xs-1"></div>
<div class="col-xs-10">content</div>
<div class="col-xs-1"></div>
</div>
</div>
See the change in your second row: http://jsfiddle.net/w7zS3/3/
(I modified the background color to red to make it easier to see the difference between the background and the boxes)