I have this site:
http://avocat2.dac-proiect.ro/?page_id=25
At this point my items are centered as they wish. The only problem is that it is not responsive.
This is code HTML:
<div class="parentVerticalCenter">
<div class="childVerticalCenter">
<div class="row sss">
<div class="col-sm-4 col-md-4 col-lg-12 col-lg-offset-0" style="font-size:17px;color:white;">
<div class="container3">
<div class="centered">[Contact_Form_Builder id="10"]</div>
</div>
</div>
</div>
</div>
</div>
This is code CSS:
.container3 {
background-color: green;
}
.centered {
display: table;
margin: 0 auto;
background-color: red;
}
div[wdid="4"] {
width: 40%;
display: inline-block;
}
div[wdid="22"] {
width: 40%;
display: inline-block;
margin-left:-40px;
}
div[wdid="2"] {
width: 40%;
display: inline-block;
}
div[wdid="6"] {
width: 40%;
display: inline-block;
margin-left:-40px;
}
If you delete this code, my elements are responsive but are not aligned properly.
.contactform10 .wdform_column
{
width:50% !important;
}
I tried to use min-width and max width for this but does not work so take one above the other elements
Basically, my div red is divided into two equal parts, each having a width of 50%.
Can you please help me solve this problem?
Items to be displayed as they are now and be responsive.
Thanks in advance!
Using "Push/Pull" with bootstrap will help you reposition elements in a stacked order when the screen resizes... perhaps this is what you meant?
full size:
| ITEM 1 | ITEM 2|
Smaller size:
| ITEM 1 |
| ITEM 2 |
Bootstrap discusses it here: http://getbootstrap.com/css/#grid-column-ordering
If this is the case, this question/answer may also assist you:
Bootstrap 3: Push/pull columns only on smaller screen sizes
I use foundation (not bootstrap) and to do it in that framework you simply set up as similar to this pseudo-code:
<div id="item1" class="small-12-pull medium-12-pull large-6">lorem ipsum</div>
<div id="item2" class="small-12-push medium-12-push large-6">qwerty colec</div>
Related
I'm trying to work out how to achieve the following in Bootstrap 3:
I have a HTML page which is primarily based around bootstrap's fixed container grid.
Half way down the page I want a row with columns of different sizes.
I want the content (text / images) inside these columns to line up with the content inside the columns in the fixed container grid.
I want the background colours of the left and right furthest columns to bleed right to the edge of the page.
It may help if I illustrate what I'm trying to achieve:
Any help would be greatly appreciated!
Update: as requested here's some code examples of what I currently have: http://www.bootply.com/ZzOefJGRRq As you can see the text and columns in the fluid container are not lining up correctly.
Bootstrap 4
Use position absolute before or after elements with width: 50vw
Codepen
HTML
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
...
</div>
</div>
<div class="row">
<div class="col-lg-6 c-col-bg--red">
...
</div>
<div class="col-lg-6 c-col-bg--blue">
...
</div>
</div>
</div>
CSS
.container-fluid {
max-width: 1000px;
}
#media (min-width: 992px) {
div[class*="c-col-bg"] {
position: relative;
}
div[class*="c-col-bg"]:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
width: 50vw;
}
.c-col-bg--red:after {
right: 0;
background: red;
}
.c-col-bg--blue:after {
left: 0;
background: blue;
}
}
You can use :before elements and some classes
https://jsfiddle.net/ex3ntia/wa8myL9v/2/
.bg:before {position:absolute;left:0em; content:'';height:100%;width:800em;z-index:-1}
UPDATE
added media query for small devices
https://jsfiddle.net/ex3ntia/wa8myL9v/3/
UPDATE 2
I have added the following line to fix the big horizontal scroll on chrome browsers.
body, html {overflow-x: hidden;margin: 0;padding: 0;}
TLDR; no framework has this out of the box, because covering all possible use cases is both very complex and would result in a huge amount of code.
It is doable but requires some amount of manual coding. The approach below works for 2 columns. More columns and breakpoints will require a more complex solution.
Sample markup:
<div class="container">
<div class="row">
<div class="col-5">default column</div>
<div class="col-7">default column</div>
</div>
</div>
<div class="container container--fluid">
<div class="row">
<div class="col-5">fluid column, aligned with above</div>
<div class="col-7">fluid column, aligned with above</div>
</div>
</div>
<div class="container container--bleed">
<div class="row">
<div class="col-5">
<div class="content">like fluid, but content is aligned with default</div>
</div>
<div class="col-7">
<div class="content">like fluid, but content is aligned with default</div>
</div>
</div>
</div>
scss for brevity
// assuming you have these values or able to set them
$max-width: 1140px;
$gutter: 8px;
$grid: 12;
$customColumns: [5, 7]; // columns you want to align
// sample grid
.container {
max-width: $max-width;
margin: 0 auto;
padding-left: $gutter;
padding-right: $gutter;
}
.row {
display: flex;
margin-left: -$gutter;
margin-right: -$gutter;
}
div[class^='col'] {
max-width: 100%;
padding-left: $gutter;
padding-right: $gutter;
position: relative;
}
#for $i from 1 through $grid {
.col-#{$i} {
width: calc(100% * #{$i} / #{$grid});
}
}
.container--bleed, .container--fluid {
max-width: none;
}
// custom grid rules for alignment
#media(min-width: #{$max-width}) {
#each $i in $customColumns {
.container--bleed, .container--fluid {
.col-#{$i}:first-child, .col-#{$i}:last-child {
width: calc(#{$max-width * $i / $grid} + ((100% - #{$max-width}) / 2));
}
}
.container--bleed {
.col-#{$i}:first-child {
padding-left: calc((100% - #{$max-width}) / 2 + #{$gutter});
}
.col-#{$i}:last-child {
padding-right: calc((100% - #{$max-width}) / 2 + #{$gutter});
}
}
}
}
I created a codepen POC for a similar layout here: https://codepen.io/bariscc/pen/BajKpMP
You can implement the container-fluid to achieve this.
Basically your webpage will have the following structure:
<div class="container">
<p>Content here</p>
</div>
<div class="container-fluid">
<p>"Bleeded" content here</p>
</div>
<div class="container">
<p>And it continues with the fixed width!</p>
</div>
If you need to adjust the spaces between those containers, you can add your own classes or ID:s to each and kind of take it from there. Since containers in Bootstrap don't have much of a default styling, this is very efficient way of creating what you're looking to do in here.
EDIT: After inspecting the comments section and looking at the code you provided, I assume you want to have the fluid container, but keep the contents within it lined up with the fixed container, right?
For this, you can just put another <div class="container">...</div> in your container-fluid. Check the updated fiddle.
Where you have the special row, you need a div with container-fluid class encapsulating a div with container class (this is a fixed width class).
Then you need to account for the background colours either side. Either add additional divs within container-fluid each side of container and set background colour, or perhaps use a three column table.
This question already has answers here:
Is there a way to make a child DIV's width wider than the parent DIV using CSS?
(15 answers)
Closed 7 years ago.
I am having trouble overriding the parent's width within my CSS.
Essentially, I have a parent and a child div like:
.parent{ width: 768px; background-color: red; }
.child{ background-color:blue; }
<div class="parent">
<div class="child">
//content
</div>
</div>
A lot of elements still use the parents parameter of 768px width, however I wish this one specific child element to extend the entire width of the screen - I have tried doing left: 0, right: 0, clearing the floats and setting the width to auto.
I also wanted to avoid using !important if I can.
Any suggestions ?
An accurate representation of what I want would look like this:
_____
|par. |
_|_____|_
| child |
| |
|_________|
| |
|_____|
Do this, use padding and margin (margin-left and margin-right and padding-left and padding-right) to achieve this.
<div class="parent">
<p>This is parent</p>
<div class="child">
<p>This is child</p>
</div>
<p>This is still parent</p>
</div>
.parent{ width: 468px; background-color: red; margin: 0 auto; }
.child{
background: blue;
margin-left: -300vw;
padding-left: 300vw;
margin-right: -300vw;
padding-right: 300vw;
}
http://cssdeck.com/labs/full/6xljy6pz
Try this https://jsfiddle.net/7txe5eev/. This will calculate and set margin for you. I assumed you are using bootstrap but if you get the logic you can modify this to fit your code.
HTML
<div class="container">
<div class="row">
<div class="col-xs-offset-3 col-xs-6 parent">
<div class="row">
<div class="col-xs-12 divs red"></div>
</div>
<div class="row">
<div class="col-xs-12 divs green special"></div>
</div>
<div class="row">
<div class="col-xs-12 divs blue"></div>
</div>
</div>
</div>
CSS
.divs {
height: 200px;
margin: 5px auto;
}
.red {
background-color: red;
}
.green {
background-color: green
}
.blue {
background-color: blue;
}
.special {
width: 100vw;
}
JS
$(document).ready(calcMargin);
$(window).resize(calcMargin);
function calcMargin() {
var width = $('.parent').width() - $('.special').width();
var leftMargin = width/2;
$('.special').css('margin-left', leftMargin);
}
Kind of hacky, but it works (in browsers that support calc and vw): http://jsfiddle.net/tvg2ocvs/
margin-left: calc(-50vw + (768px/2));
margin-right: calc(-50vw + (768px/2));
Doesn't look nice when viewport is smaller than 768px though, but nothing a media query won't fix :)
I have four divs laid out in a sequential order. I want each to take a corner of the page provided the content will fit, otherwise arrange sequentially vertically.
#pptopleft,
#pptopright,
#ppbottomleft,
#ppbottomright {
text-align: center;
border: 1px solid black;
width: 50%;
}
#ppcontainer {
border: 1px solid black;
font-size: 120%;
min-height: 250px;
margin-top: 20px;
margin-left: 50px;
margin-right: 50px;
padding-left: 3px;
padding-right: 3px;
padding-top: 3px;
padding-bottom: 3px;
overflow: auto;
}
<div id="ppcontainer">
<div id="pptopleft">#1</div>
<div id="pptopright">#2</div>
<div id="ppbottomleft">#3</div>
<div id="ppbottomright">#4</div>
</div>
If they can fit, I'd like them to each take 50% width of the parent container, but if they need to be stacked vertically, each should take 100% width. Something like the below:
//contents of each div will fit without wrapping
1 2
3 4
//contents of each div will not fit without wrapping
1
2
3
4
The latter maybe for smaller resolutions or mobile devices.
What can I do to achieve this using CSS?
Media queries could help with this. For example, add the following after your current CSS:
#media all and (max-width: 500px) {
#pptopleft,
#pptopright,
#ppbottomleft,
#ppbottomright {
width: 100%;
}
}
Change the 500px to match whatever breakpoint you want, and set your existing divs to float: left.
Use Bootstrap: and structure your div as following
<div class="container-fluid">
<div class="row">
<div id="1" class="col-md-6"></div>
<div id="2" class="col-md-6"></div>
</div>
<div class="row">
<div id="3" class="col-md-6"></div>
<div id="4" class="col-md-6"></div>
</div>
</div>
I wanted to ask – if I have 3 columns of DIVs that I want to responsively change to 2 and 1 depending on the width of the user's screen (1 column for mobile devices) – what's the best way to do it? The div elements should simply stack under each other.
<div class="container">
<div class="row">
<!--left-->
<div class="col1">
</div>
<!--/left-->
<!--center-->
<div class="col2">
</div>
<!--/center-->
<!--right-->
<div class="col3">
</div>
<!--/right-->
</div>
</div>
<!-- /.container -->
Thank you!
PS My design looks like this:
To
you can accomplish this with the float property. You'll just need to clear the floats by adding overflow:hidden to the parent or using a clearfix:
FLOAT EXAMPLE
CSS
.row{
overflow: hidden;
}
.col{
background: red;
width: 200px;
height: 200px;
float: left;
margin: 5px;
}
OR
You can use display: inline-block; to do the same
.col{
background: red;
width: 200px;
height: 200px;
display: inline-block;
margin: 5px 2px;
}
INLINE-BLOCK EXAMPLE
There are some answers to a similar question already, but this one has a twist.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-3 grey">
<div class="wrapper">
<div class="info">(i)</div>
<div class="text"><div class="labeled">This is a long text</div></div>
<div class="icon">[$]</div>
</div>
</div>
<div class="col-xs-12 col-sm-9 green">
Content
</div>
</div>
So I need three divs, aligned in one line at all conditions - info, text, icon - with two divs on the sides having fixed h/w, and one in the middle taking only as much space, as
either it needs, and not more
or is available for it, cutting the context with overflow:hidden
Here is the fiddle http://jsfiddle.net/L7tmt5w1/3/
Here are my mad skills in sketching ideas http://imgur.com/tF0HkD2
For those, who want to feel my pain, you may also try re-ordering the divs - text, icon, info - when the screen size goes mobile (bootstrap's col-xs-)
You can use the display: table-cell; method for this situation:
.wrapper {
display: table;
text-align: right;
width: 100%;
}
.info {
width: 20px;
height: 20px;
display: table-cell;
background-color: #005ea8;
color: #fff;
}
.icon {
width: 20px;
height: 20px;
display: table-cell;
background-color: #eb690b;
color: #fff;
}
.text {
display: table-cell;
background-color: #ccc;
width: auto;
}
This mimics the table display properties and keeps all the children of .wrapper inline and the middle one "elastic" as it has no defined width. You can also remove the floats.
http://jsfiddle.net/L7tmt5w1/7/
maybe this solution will help you DEMO
<aside class="panel">
...
</aside>
<div class="content">
...
</div>
.content {
overflow: hidden;
border: 1px solid;
}
.panel {
float: right;
width: 200px;
border: 1px solid;
}
You can try this http://jsfiddle.net/L7tmt5w1/3/
Remember: If you want to float an element to the right, it must be the first element. For example:
<div style="float:right"></div>
<div style="float:left"></div>
AND DIV's are already block elements, so you don't have to add display:block to a DIV-element
I don't know if this is what you want: jsfiddle
if not content on "text" no div... if too much content it's hidden
(but you can add
overflow:auto
to the text div for scroll bars