Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I have started a new project and I need (only) responsive grid for layout.
I have tried with http://www.responsivegridsystem.com/ this grid system and it's fine but it adds some classes for inputs and other elements that I don't need and it makes a mess in some of my forms.
I am looking for any solution.
I need just responsive grid that will not mess with other elements.
Is there any such framework?
Maybe you can use display:flex , setting min-height min-width for childs to keep safe minimal size where little content.:
http://codepen.io/gc-nomade/pen/wFHfq
In order to see IE 10/11 , working too , you need to add a width or height to main container. Most of the time width:100% will do , here i setted height:100% on body.
This will not work for older browser, you may use vendor-prefix and old syntax to increase compatibility. here is something to read and here too .
body div {
display:flex;/* flex it */
flex-wrap:wrap;
min-width:320px;
min-height:160px;
box-shadow:inset 0 0 5px white, 2px 2px 3px;
flex:1;
}
html,body {
height:100%;/*IE*/
margin:0;
}
body>div {
min-height:100%;
}
div div {
background:pink;
}
div div:nth-child(even) {
background:lightgray
}
BASIC HTML TEST:
<div>
<div>
</div>
<div>
</div>
<div>
</div>
<!-- and so on -->
</div>
try semantic.gs
Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.
All without any .grid_x classes in your markup. Oh, and did we mention it's responsive?
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
Like what container do if I used it on div tag and what will wrapper do if I used it on div tag or what is the different between them.
Container and wrapper are the same thing - they are classes usually applied to divs that contain other elements (or wrap around them). The only differernce is that in Bootsatrap - .container has specific styling applied to it - but the concept is that they are both just classes that are applied to elements and not just to divs either -could be any element that houses other elements.
As can be seen in the snuippet - they are exactly the same.
I personally use .wrapper more than container due to the Bootstrap connotations and I like the idea tht a div wraps around the inner contents - but that is person preference only.
.container,
.wrapper {
border: solid 1px red;
padding: 8px 16px;
margin: 16px
}
<div class="container">
<p> I am a p element within a div with a class of container</p>
</div>
<div class="wrapper">
<p> I am a p element within a div with a class of wrapper</p>
</div>
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 4 years ago.
Improve this question
I am not asking this because it's a problem for me, actually, that's exactly how I wanted to display the divs, but I didn't know they would appear below each other. Why is that? I only gave them width and height, I didn't position them.
I thought they would appear on each other at the same position
<div class="D1">
</div>
<div class="D2">
</div>
<div class="D3">
</div>
<div class="D4">
</div>
.D1,.D2,.D3,.D4{
border:1px solid;
border-color:red;
width:500px;
height:200px;
}
/* OR
div{
border:1px solid;
border-color:red;
width:500px;
height:200px;
}
*/
Sorry for this probably dumb question, but I'm just curious :D
That's the expected behavior.
div by default are block elements which means that they always start on a new line and take up the full width available.
If you want elements to be on the same line and to only take up as much width as necessary, you must use inline elements, such as span.
Find here a complete reference
By default, the flow of the page will display your divs elements (which are blocks) one below another as you have seen.
If you want to override this behaviour you could set a
position: absolute;
property to your divs so they can be placed wherever you want regardless of the position of other elements. For example you may want to set all your divs at the top left corner by doing:
div {
position: absolute;
top: 0;
left: 0;
}
By default display property is block for div.Change it to inline to display in one line.
If you use float: left; in css, the problem will be solved. Because div element is a block level element.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
is possible to make a specific element about 5px longer that it would automatically be? because my article element has a video element which sticking out of the given space a bit, while I could just set the height manually I thought it would be better to have it set itself automatically (like it normally does) only adding about 5px. Any Help?
I'm not sure I understand the question, but have you tried giving it a padding-bottom of 5px?
Try using a dynamic width to set the width of your contained element.
Eg.
article {
width:300px;
}
contained-element{
width:95%;
}
Just give padding-bottom:5px to your <article> elements, & make height:auto for both elements, then <article> element will expand as per height with 5px at bottom.
Am not very much sure what are you asking about but if it's regarding fitting your video in a div for that you can create a wrapper class such as
.wrapper-div {
position: relative;
padding-bottom: 20%;
height: 0;
}
then have the child element inside it
.element-to-load{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I assume you want to the div to expand if the video is larger than the article.
To do this you just need to:
1) Give the Outer Div a height:auto - and a min-height:
2) Give the Inner Div a margin-bottom of 5px
Check out this Fiddle Demo
Does this answer your question?
Just set the CSS for that element be (use the actual pixel width and height):
height: 25px;
width: 50px;
and the height and the width will be forced to be that height and width.
Although if possible try to use 'em' so that it is automatically responsive.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
margin: 0px auto; is not working with width: 100%; any one know the answer for this
Eg: .abc{
margin: 0 auto 0px;
width: 100%;
<div class="abc">
<input class="acc" type="radio" name="a">
<label>hi.</label>
<input class="cc" type="radio" name="a">
<label>No</label>
</div>
100% width does not leave any space for margin.
margin:0 auto will work only on width less than 100%.
Write
{text-align:center}
to center content inside element.
Demo here.
Because you are setting something as a full width you cannot centre it. The best option would be to set your width as either fixed width for example 'width:600px;' and then use 'margin:0px auto;' the other way would be to use a percentage width for example 'width:70%' and then also use 'margin:0px auto' this would mean that the styled element would grow or shrink to the screen size. With this option you can set the maximum size and the minimum size as well
use "text-align:center;" from the outer div
hope this helps
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have two spans with inline-block display, in responsive mode (for resolution lower than 768X1024) I need to position one on top of the other so I set display to block but the wrong one is on top how can i make the second span to go on top?
thanks
See if this variation helps:
http://jsfiddle.net/panchroma/RLSkL/
The important bits are that I flipped the order of the two divs in the HTML then used CSS to manage the layout
CSS
/* pull the first div to the right and the second to the left for desktop views */
#loginContent{
width:330px;
float:right;
}
#attensions{
width:330px;
float:left;
}
.LgnBtn{
clear:both;
}
/* for tablets and smartphones, remove the floats above */
#media (max-width: 790px){
#loginContent{
width:100%;
float:inherit;
}
#attensions{
width:100%
float:inherit;
}
}
Hope this helps!
Use float:left on the <div> you'd like to be on top.
the only way is move up the #loginContent in your html code, in other hand you can use absolute position to set their position as you like. for exam:
#attensions{
position: absolute;
top: 180px;
}
#loginContent{
position: absolute;
top: 0;
}