I have two Bootstrap columns:
<div class="row">
<div class="col-md-6"><div class="my"></div></div>
<div class="col-md-6">some text</div>
</div>
They are both half a grid due to col-md-6. Now, I need set up the minimal width of div.my. If I apply min-width, I have a side-effect: when minimizing, at one point the div.my overlaps the parent column (before both columns are 100% width).
I have no intention to set up minimal width of the column itself, because div.my could have margins.
I know, I can use media-queries, but is there a better solution?
Regards,
Firstly use media queries, what reason is there not to?
They will give you complete control of how things look at any given size.
To prevent the overlapping div causing problems you could use.
.col-md-6 {
overflow: hidden;
}
It would be better to use a different class though, .col-md-6.no-overflow for example.
It's difficult to give a conclusive answer without knowing the content and purpose of the .my div.
<div class="row">
<div class="col-sm-6" style="min-width:300px !important;"><div class="my"></div>
</div>
<div class="col-sm-6">
</div>
</div>
Try this
min-width property is used to set the minimal width that that div will have in any case so it will not go below this width. You have to use max-width for that so:
div.my
{
max-width: 80%
}
For responsiveness its always good to use %
you could have use calc() feature of css for width, min-width etc.
Related
I'm curious to know how you resolve the following problem.
Using Bootstrap 3 with 24 columns and grid-gutter to 30px.
In wide display, I use col-7 for the sidebar left and col-17 for the main content. The problem is bootstrap is calculating the widths with percentage. So I have 339.5px (29.16667%) for the sidebar, and 824.484px (70.83333%) for the content.
<div class="row">
<aside class="col-lg-7">[sidebar]</aside>
<div class="col-lg-17">[main content]</div>
</div>
Now, I use some scripts like lazysizes and lazyaspectratio to lazy-load my pictures and have the image container kept the same dimensions even if the image is not already loaded. With lazyaspectratio, the width must be 100% to recalculate the height to keep.
BUT... because there is a but... if my main content is 824.484px width, the picture is 824.484px width too, and picture quality is bad. Assuming my picture display must be 824px, the final picture display is shitty and I lost quality, even if the ratio is respected.
My question is : how to bypass this problem with img > width=100% ?
I saw on several threads that people "fix" the width of the row children, like this :
div.row > aside.col-lg-7 {
width: 340px;
}
div.row > div.col-lg-17 {
max-width: 824px;
}
It seems a good solution to keep img > width = 100% and have integer columns width, but with this solution, I must add lot of css rules to manage for multiples col-* and multiples media-queries...
And you ? how do you solve this kind of problem ? Because I think using img-responsive class with width=100% cause quality loss on percentage based width with Bootstrap 3... I'm sure that I'm not the only one to encounter this problem.
Thanks in advance for any suggestion.
Andrejs: You can customize bootstrap at: http://getbootstrap.com/customize/
titouille: You could create a Javascript that rounds the images widths down based on their classes or parents.
For each image element you read in the width of the col or parent and set it (rouded down to 1 px) as it's max-width
For the purpose of learning Bootstrap, I'm copying http://www.newsweek.com/ (using as vanilla Bootstrap as possible) and the top bar (sign in, register, etc.) has me stymied. With a large viewport, it appears to be a simple container/row, but as it resizes and gets to a medium viewport, instead of breaking it seems to transition to a container-fluid/row-fluid.
I set up a tester in Codepen with every possible combination of containers and rows fluid and responsive independent and codependent (that I'm aware of) to figure out what was going on and to experiment a bit:
http://codepen.io/spectre6000/full/vOzeBB/
At a 1200px viewport width (as indicated below the rulers),
<div class="container">
<div class="row">
...
</div>
</div>
and
<div class="container-fluid">
<div class="row-fluid">
...
</div>
</div>
...are identical. It seems this is what the Newsweek site is doing, but I can't find a way to do it myself without coding the bar twice with different visibility.
How do you switch from one container/row setup to the other at the breakpoint?
Add a media query! Use the container class, then do something like this (assuming your container has the id #myContainer):
#media (max-width: 1200px) {
#myContainer {
width: 97.5%; /*this gives it the precise width to match the Bootstrap defaults*/
}
}
The width attribute is pretty much the only real difference between container and container-fluid, so this just makes your container emulate a container-fluid.
In the latest Bootstrap 4.4 you can use:
<div class="container-xl">
<div class="row">
...
</div>
</div>
This will start off width: 100% ('container-fluid') and then switch to 'container' when you reach your 'xl' breakpoint (normally 1200px).
Consider the basic HTML below:
<body>
Random HTML content
<div class="container">
<!--Some content loaded via ajax or the like -->
</div>
Other random HTML content
</body>
I want the width of the "container" div to be the MAXIMUM of three potential values:
100% of the window
1024px (for best visual appearance)
the width of the content
I have been able to accomplish #1 and #2 by using the CSS properties width:100% and min-width:1024px. I can also accomplish #2 and #3 by setting display:inline-block and min-width:1024px. However, I haven't been able to get all three: if I add in the width:100% to the display and min-width properties, it overrides the child content sizing effect of the inline-block display and gives me only 100% width, even when that means the content overflows.
I know I can hide overflow or give the div itself scrollbars, but what I want is for the div to expand as needed, or to the full width of the window, whichever is greater - but never narrower than 1024px.
Edit: Note that the content loaded in the div may be less than 1024px. The div itself, however, should never be less than that, as it would no longer blend nicely with the look and feel of the rest of the page.
You can achieve this by adding another div on top of first one:
<div class="container2">
<div class="container">
</div>
</div>
css:
.container2{min-width:100%; display:inline-block;}
.container{min-width:1024px; width:100%;}
http://jsfiddle.net/om10t3gn/4/
You can augment your second proposal with a virtual pseudo-element to achieve the dimensions you want without using javascript
.container {
min-width: 1024px;
display: inline-block;
}
.container::before {
width: 100vw;
display: block;
content: ' ';
}
Basically, it's adding a zero-height element to the top of your container that has the same width as your viewport, which is 100% of the width of <body>. So it adds #1 to your existing solution that already achieves #2 and #3.
And it doesn't use any javascript, and will stay correct with resizes.
I am not very skilled with CSS, but I think I have a solution for this problem.
To have a max-width in pixels and a max-with in percent at the same time, you could first calculate the width with the clamp-method (this includes the first of your two max-widths) and then add a normal max-width. The clamp-method is relatively new and not supported by old browsers unfortunately.
<div class='container'></div>
CSS:
.container{
width:clamp(400px,250px + 25vw,100%);
max-width:700px;
}
This should set a max-width both at 100% and 700px.
I have tested it on a notebook with Firefox and Chrome.
Use javascript to pick the largest value, use jQuery to assign that value to the width of the container div.
var window_width = $(window).width();
var container_width = $('.container').width();
var default_width = 1024px;
var max_width = Math.max(window_width, container_width, default_widht);
$('.container').css('width', max_width);
My question is similar to this: How to make static PSD fit into Responsive Bootstrap grids
But the selected answer (nested grid) confused me. (I can't post comments yet and I thought maybe other people would have more suggestions as well.)
Suppose I am given a psd design of 896 px with menu on left side taking about 213 px and some spacing of 10 px and then other stuff taking 683 px. How would I use bootstrap grid for something like that? I don't want any fixed-width columns. Please elaborate on the nested grid approach (or any other approach you may have).
See the picture: A is 213px, B is 896px and the spacing in between is 10px.
Scenario 1: (What I would do)
I would conform to Bootstrap's grid system as is with the 1200px main container that you should be using. Doing this gives you 2 desktop views (small and large) as well as a tablet and mobile view for the layout your looking to do.
This is what it would look like... bare bones minimum:
<div class="container">
<div class="row">
<div class="col-sm-3">
<p>Sidebar</p>
</div>
<div class="col-sm-1"></div>
<div class="col-sm-8">
<p>Main Content</p>
</div>
</div>
</div>
JS Fiddle: http://jsfiddle.net/tzhben/hrzboLex/
Scenario 2:
Using the 896px maximum width will limit the amount of different viewports you will see but it still will remain responsive. What I did here was override the width of the container to 896px and kept all the same html/css.
.container {
width: 896px;
border: 1px solid;
}
JS Fiddle: http://jsfiddle.net/tzhben/b9Lyfzxd/
Both seem to work. If you notice the lonely "div class="col-sm-1" (in the html) that's providing you with the gap you're looking for. There are may ways you can take this further depending on your ability to manipulate CSS.
Hope this helps.
My layout is like this:
<section class="container">
<div class="picture-div">
<figure><img src="blah"></figure>
<figure><img src="blah"></figure>
...
</div>
<div class="text-div">
<p>Text which could be very very very very very very very very very very very very very very very very very very long</p>
<p>Text which could be very very very very very very very very very very very very very very very very very very long</p>
...
</div>
</section>
Both the picture-div and the text-div have dynamic width according to their content. The picture-div has a min width of 500px and the text-div has a min width of 300px.
I want a dynamic effect matching the following rules:
The element following the container should have float both cleared and the content fully below the container element.
If the viewport width is not enough, the horizontal scroll bar should always be placed on the HTML element instead of the container, picture-div, or the text-div element.
If the container width exceeds (picture-div width + 300px), the text-div floats at the right of the picture-div and takes whole left space of the container. (eg. if container width is 2000px and picture-div width is 800px, then picture-div takes 800px and text-div takes 1200px.)
If the container width doesn't exceed (width of picture-div + 300px), the text-div doesn't float and both the picture-div and the text-div take full container space. (eg. if container width 1000px and picture-div width 800px, then both picture-div and text-div take 1000px)
Is there a pure CSS solution for this?
I'm kinda bad with syntax far as what you might be asking for, but thought I'd give it a shot to see if you might be able to follow this after in order to fix your issue.
It sounds like you want a responsive layout that will respond to maximum screen width and do specific things at each max or min width that the window shows. The floats would just be different classes that you could add in, I normally just use class="fl" and include that in my css. Here's a small example of what I have that pretty much does what I think you're asking.
<div id="panel-1-index">
<div class="row">
<div class="large-4 columns">
<img src="your-image.gif"/>
</div>
<div class="large-8 columns">
<p>Your Text Content</p>
</div>
</div>
</div>
Then your css would associate each of the class="large-* columns" as a certain width percentage. For the example above it would be:
.large-4 { position:relative;width:33.333% }
.large-8 { position:relative;width:66.667% }
The row and columns css properties will essentially just provide you with specific padding parameters and 100% width. After that, it would just involve you adding media queries that would give the classes different behaviors depending on screen widths.
The example I gave you is from use with my own site utilizing Zurb Foundation css framework. The first part of your question I couldn't really answer cause I have no idea - but the rest can be accomplished by looking at Foundation framework styles that shoot for responsive design. In my very limited experience, I would also suggest not using pixels for your measurements and instead go with percentages or em measures for better responsive design.
Let me know if I was far off, or just trying to tell you something you already know :)