I am working on this project, the url is grouporigin.com//clients/upload/WAHA_Capital1/index.html If you see the bottom section in the home page, the div boxes with the background images are behaving differently than the div boxes without a background image. They are also not covering the full height. What css changes I need to do, to make the divs with the background image behave in exactly the same way, as the div boxes without a background image.
as you are not providing any html i try by inspect element.. and you make comman mistake. while using bootstrap grid system you need to wrap every element in th form of <div class="row"> as you can see in pic the 3 div with class name "form-field" is not wrap around row class div
wrap these div around row like
<div class="row">
<div class="col-sm-12">
<div class="form-field">..</div>
do this for every row and give appropriate col-sm-* class
Related
I have an image that is floated right full screen and comes below the main content. However, on mobile I want the image to be above the content and not below. Take into consideration that in my HTML the image is listed below the main content. Any suggestions would be amazing.
Html Code
<div class="wrapper">
<div class="main">
Main stuff
</div>
<img src="image.jpg>
<div>
You can use "display:flex" for the parent div which wraps your image and your text. And the property "order" for your child elements. If you want to switch the position of the element, you can change order depending on media queries.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
I'm trying to achieve a dynamic layout option for a site, but I can't nail down how to make this work. The effect I'm trying to create should look like this:
Where:"1" will have text, and have a dynamic height;
"2" will have a background color and also fill the containing div below it, with a small vector image centered horizontally and vertically. I want to use a dynamic height on this so no matter how much text is in "1", it fills the rest of the bottom of this container;
"3" is an image (img-responsive) that fills the right half of the container. It will be what sets the height of the container div, with the possibility of different sized images being implemented.
I want these to display as shown on desktop browsers and landscape tablets, but to fall into a single column when its viewed on a smaller screen format.
I'm currently using two col-md-6 for each of these, and had the desired background color on the container. The problem I'm running into with bootstrap is when the screen is between 992px and 1200px, the content is collapsing to a smaller screen size, but it is making the bottom of "2" extend beyond the bottom of "3".
I've tried using flexbox for this, but when I use it in conjunction with col-md-6, it doesn't collapse to the single column on the smaller screen sizes. It also just doesn't seem to work too nicely with bootstrap 3.
I'm open to any type of solution outside of completely taking out bootstrap. Thank you all so much for your time and assistance!
EDIT 1:
Totally forgot to add the code. What I have so far is as follows:
https://jsfiddle.net/b86k1myr/
<div>
It's kind of wonky because bootstrap isnt also enabled. But that's what I have for that so far. The other attempt with flexbox is as follows:
https://jsfiddle.net/mkg73uvk/
As a tip for the future, you should always post the markup you're using currently.
Try this:
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="row">
<div class="col-md-12">1</div>
</div>
<div class="row">
<div class="col-md-12">2</div>
</div>
</div>
<div class="col-md-6 col-sm-12">3</div>
</div>
I have an issue with my CSS layout
I have a form that is contained in a 500 pixel fixed width. It is set to be centered in the page with margin auto;
Inside that div I made a table using div's. Since each div's that act as a table row have different height, I have used the overflow:hidden property. I did that to minimize the size of the form.
Inside that div I have 3 other divs that act like table data "td". They are floating inside the row.
What I am trying to achieve is to display another div on top of them all when there is an error in the form. Just like the one you see on Stackoverflow reminding you that you have code in your text that need to be set as code. The red div on the right. Now I am a bit stuck because I can't overflow that div to the sides.
So what other option do i have to set the height of the "row" div without using overflow:hidden. I dont want to use tables and the content is always changing.
Any solution is welcome.
Here is simple code so you get the picture;
<div class="row">
<div class="overflowing"></div>
<div class="float_left"></div><div class="float_left"></div> <div class="float_right"></div>
</div>
The overflowing div should not push the floating divs around and is not visible until I change it's property and fill it with content.
Use clearfix class with row if you are using bootstrap
<div class="row clearfix">
OR
<div class="clearfix"></div>
before end of row tag
If it is not using bootstrap
<div style="clear:both;"></div>
before end of row tag
`
<div class="float_left"></div><div class="float_left"></div> <div class="float_right"></div>
</div>`
I think it will work, and about the alternative to overflow use fixed height width thenoverflow:auto wolud be useful
How create table via div which always centered their cells. I mean, if width for example 302 px, table show 3 divs in one line with width of 90px, and space between those divs and border are equal (8px). And if table width changed to 210px, 2 div will shown in one line with equal space (10px), and third div will move to the next line. Window width is dynamic.
I would suggest using css and frameworks such as: twitter bootstrap or zurb foundationn, Check this out to get the overlaying image about responsive frameworks these have pre-set setups but you can also modify them to your liking..
You would need to change
x,y,z
to suit you because I don't exactly follow your math, HTML tables are out dated and should not be used!
<div class="row">
<div class="col-md-x">.col-md-4</div>
<div class="col-md-y">.col-md-4</div>
<div class="col-md-z">.col-md-4</div>
</div>
I've got this layout that i want to cut into html/css, but i'm struggling with picking best way to strcture html/css for major content (like diffrent bg block in the middle that is under 960 content block, and covers whole wideness etc.). I've attached a structure of the layout:
So my main quesions are:
How to handle custom bg block that is ,,outside'' of grid, or should
it be inside, and then make content block be inside contenbg, and
outside the container, that logo and menu is?
How to handle custom png shadows (i wanna avoid css3 in this case) that should be outside the content
slider (as on image)
Same question applies to footer, should it be outside the main 960
container? Should i use ,,main container'' at all in this case? I'm
not sure whats the best practise here.
Thanks
I'm unable to see the attached file but I'll try to give you some guidelines:
You should have a main content which is centred on the screen and is 960px wide.
If the header/footer are the same width (i.e. their Background doesn't span more than 960px), they should be in the container div. On the other hand, if their BG is wider than 960 put each in a separate div which spans as wide as you need and inside this div put another div which is 960 wide and centered.
example:
<div id="headerWrapper">
<div id="header">...</div>
</div>
<div id="content">...</div>
<div id="footerWrapper">
<div id="footer">...</div>
</div>
if you want png shadows without using CSS3 your only option is slicing the image with the shadow.
I hope that answers your questions.