I'm designing a layout that will serve more like an individual dashboard for registered users. I made it simple, with a basic 2-column grid, one for the sidebar and one for the main content.
Because, like, 80% of the site usage will happen in a separated subsytem, accessed in a chrome-less window (that doesn't matter for the moment), there's not really much content for the right column, the main body.
So I would like to know if it's possible to make the sidebar a bit larger than the current col-md-2 (pairing with col-md-10), but the next level I'm aware of, col-md-3 is too large for a simple sidebar.
Is there a mid-term or an intermediary class for that?
Unfortunately there is not.
However, I've run into this situation a number of times and played with margins to get the size I needed. For example, If you changed col-md-10 to col-md-9 and then did a negative margin on the div inside col-md-2 you could extend your content outside of the grid structure. If done correctly, you wont have any problems. Keep in mind that the margin will need to be adjusted at all media queries. Hope this helps a little.
Related
i have a Commercial Website Called Akaratak
In the Search Page in Mobile mode (after resizing the browser to the minimum)
there is a space left empty between some divs
as follows:
i know it must be a simple question but i couldn't get it to get aligned
As i can see you are using Bootstrap, but not in a proper way. You should change your layout to a 4 or 6 column one so the grid will auto adjust to a 2x2 layout as you want it.
Another thing that you can do is to make your layour like:
2x2
-1-
2x2
Using bootstrap classes you just need to add one class to the third object of each row making it sm-12 and the others sm-6. I suggest you to read more carefully Bootstrap grid system to use it the right way.
Instead you can use Bootstrap 4 grid system witch allow you to move and workaround your problem in a nice way.
You should remove the <div class="clearfix"></div> child on every <div class="deal-top-top"></div> parent :)
I am trying to use Bootstrap v4 (alpha 3) to create a responsive layout for a web application that i'm working on.
Everything works for the most part but what i'm really struggling with is reordering my cards using the push and pull classes. It was to my understanding that the push and pull classes reordered the cards when used correctly while the rest of the layout responded to the change of order as mentioned in the Grid system section of the docs under 'column ordering':
Easily change the order of our built-in grid columns with .push-md-*
and .pull-md-* modifier classes.
which can be found here: http://v4-alpha.getbootstrap.com/layout/grid/#example-column-ordering
However, when using these classes it seems to, instead of reordering the cards, just move them left and right (to the point where they can even overlap or go off screen, this functionality is also suggested by their css). This also implies that they have the exact same functionality as the offset functions, who's purpose is to move a card by x number of columns.
I have managed to get them working as expected in the past before, but have no idea how. So can someone please tell me what i'm doing wrong?
HTML:
<div class="container">
<div class="row">
<div class="card card1 col-lg-4 col-md-6"></div>
<div class="card card2 col-lg-4 col-md-6"></div>
<div class="card card4 col-lg-8 col-md-12 push-lg-4"></div>
<div class="card card3 col-lg-4 col-md-6 pull-lg-8"></div>
</div>
</div>
CSS:
.card{height: 150px;}
.card1{background-color:red;}
.card2{background-color:blue;}
.card3{background-color:green;}
.card4{background-color:yellow;}
JSFIDDLE:
https://jsfiddle.net/61yoqkjk/5/
The expected behavior is that at large sizes and higher, the green box will be moved up to be on the same line as the red and blue boxes. However, instead the green and yellow boxes swap places but there's now a gap to the right of the blue box where the green box could fit.
This has been tried with Bootstrap 3 as well so I don't think this is a bug.
I have also checked through other similar questions but none of their answers seem to fix my problem.
I think you might be misunderstanding, how bootstrap works. You want, that the elements some sort of "switch their position" by pulling/pushing them (which is very hard to achieve with css only). What bootstrap does, instead, is that the helper classes push-xx and pull-xx move the elements visually around. E.g. the code for pull-lg-8 is:
.pull-lg-8 {
right: 66.666667%;
}
...and this does NOT affect the other elements. Imagine, that the browser first calculates the layout box for each element by using properties like width, height, float, display, ... and afterwards, after every element has a certain place where it belongs, the relative positioned elements are visually moved to a different place (if right, top, bottom or left was used). From a structural point of view, they still take the same space, though and don't affect the other elements.
Therefore your yellow element (which is too big for the first line) is in the second row taking 2/3 of the space, whereas your green element has its box in the second row at the very right and is afterwards pushed 2/3 to the left.
I'm working on a MVC application and am having some trouble with the HTML/CSS layout in regards to one of the partials that we have.
The shell of the application contains two columns that expand to be the height of the column with the most content. The left column contains the navigation for the app. The right column is the content area.
I've managed to get this part working appropriately.
Where I'm having issues is that inside for some pages, the content area (right column) needs to be split into two columns. I need both of these columns to dictate the height of the content area, which in turn would dictate the height of the main navigation.
Any input would be incredibly useful! Thanks!
EDIT I got it working, but am not entirely happy with the solution. It requires me to use inline-block, which reads white-space. As a result I used the comment across two lines strategy, but I'm afraid that this would get deleted by somebody while editing/cleaning the project up after the fact.
http://jsfiddle.net/StSmith/RzKJX/
.
I'd imagine that, if you simply added the columns they would automatically fill the space up thus dictating the height of 'content'.
However, if you're floating the columns then the containing element won't pick up their height. In this case you'll need to add, either a cleared element below the columns, or, better add 'clearfix'.
all! I thank you for your time and attention today : ). I currently use Dreamweaver and do some design work, however I have been unable to find an answer to this question. I'm happy to pursue any knowledge necessary to accomplish this (such as learning php or javascript, etc.)... Here's is my problem... I want to make a webpage have this type of layout - (this would be a homepage, broken into components in three columns (there would be a header above, that I left out of the illustration because that would be full width of website and not produce a problem, I don't think)... the left is full height. the center would have three rows and the right would have three rows - offset from the center column) -
http://i.stack.imgur.com/KkEiR.jpg
I can place a div as a wrapper around the entire thing (as I normally need to do when making a three column wide section), and using css... float the left column, left. Add a left margin to the center one (whatever the width of the left div is). And float the right one, right... However, while that does allow me to have three columns across, I cannot have the multiple rows downward in the center, or right column (because it outputs at the height of the largest column for the wrap). In these smaller sections I would like to use some php scripts (I have a php news script and a shoutbox script), so it's not like it's a static picture or text that I could carefully slice, making numerous div wraps and divs within them down the page...
In my research I've seen things such as php includes and requires (I'm not sure if that would allow for the multiple rows in the center and right colums though), I just know it can be used to insert a php script or document into a div. I've also read that isn't the best practice and that Ajax/jquery should be considered for better security. However, I'm still not sure if either of those would allow me to create this layout. I'm sure that joomla or drupal or any number of other CMS probably allow for this, but I want to know the "hands on" way to do it (I've always found that makes configuration, troubleshooting and design much easier and much better quality down the line).
I respectfully ask that answers stay on topic as much as possible, without questions such as, why do you normally do or use this? etc... I would greatly appreciate constructive information on what I CAN do to accomplish this : D... I thank you all again for your time and attention!
Ok, I've found at least one way to accomplish this : D... I still use Divs within Divs (floating them left or right) and placing them within wraps (that can also be floated left and right) to get as many Divs across as I need. Then when I need multiple vertical Divs, I simply create a new *.php file with all the vertical Divs I need, and use the php include_once line to call that *.php file (and all of it's vertical Divs) into the Div on the original page, voila!
My first page (in shorthand) may look something like this -
<div id="content_wrap">
<div id="a"></div> (floated left in css)
<div id="b">
<?php include_once ('vertical_divs.php'); ?>
</div> (floated left with lefthand margin in css)
<div id="c"></div> (floated right in css)
</div>
My vertical_divs.php may look like this -
<div id="vert_a"></div>
<div id="vert_b"></div>
<div id="vert_c"></div>
<div id="vert_d"></div>
<div id="vert_e"></div>
Again, this would pull all of those vertical Divs into Div "B", allowing that column to have multiple vertical Divs without interfering with the Divs to it's left or right.
I do not know what I need to use to create the fundation of my website. Tipically, I want a design structure having 3 columns in the main content. (column 1 = navigation panel, column 2 = central for content, column 3 = advert panel).
What ares the best practises (using CSS3 if possible) to realize this design ? I hesite between the flexible box layout OR grid layout OR multiple column method. (I do not understand what is the most adapted to my case, in order to have a simple, flexible and less display bugged solution). I also want my website to fill as well as possible the screen (using the more available space).
Do I need to define a screen resolution, or all is possible with % ?
Tkx,
When implementing structure, I usually do something like the following (psuedo-code):
<div id="wrapper">
<div class="column" id="left">
<div class="column" id="middle">
<div class="column" id="right">
The wrapper could be fixed width or fluid. I usually fix width this and center it on the page using margin: 0 auto in the CSS.
The left, middle, right are for the columns. I would set display: inline-block in a class name called column and control each individual column size using it's id selector in the CSS.
I like the flexible box layout though as this is a good fit for this problem but I've yet to play much with it. If I'm not mistaken, I don't think it's supported in every browser as of yet but it might be worth a shot.
As far as dealing with different screen sizes, media queries in CSS are the way to go. There are numerous resources and step-by-step guides around the web that should get you up and going with this in no time. Hope this helps.