I would like to get unusual behavior bootstrap and media-query.
The content of one div (a) should be dependent on his width and not the width of the browser window. In the case of the picture (a) has a width of 600px and should be displayed as XS, and the container should act as LG.
You are thinking of Bootstrap incorrectly.
The point of bootstrap is to allow you to easily modify the behavior of elements depending on the width of the screen. If you're using only the grid system for example, all you're modifying is the width of the elements themselves based on the width of the screen.
If you want your a element to behave as sm at all times, regardless of the width of the screen (or at least until it reaches xs, for example) then you can use something like:
<div class=" div-a -col-sm-6"></div>
This will tell bootstrap to display the div A with 6 columns as long as the screen width is bigger than sm.
I'm not sure what you mean by "the container to act as LG" but I assume you mean it should be modified only for LG screens. Then:
<div class="container-div col-LG-12 col-*-newSize">
<div class=" div-a -col-sm-6">
*content*
</div>
<div class="container-b-c col-*-6"
<div class"div-b col-*-12"
-content-
</div>
<div class"div-c col-*-12"
-content-
</div>
</div> //End of container-b-c
</div> //end of container-div
where * is the size you need.
Related
The question I have is pretty simple.
I have a div with responsive images. on sm the divs are full width like:
<div class="row">
<div class="col-md-4">
<img src="/img/picture1.jpg" class="img-responsive">
</div>
<div class="col-md-4">
<img src="/img/picture2.jpg" class="img-responsive">
</div>
<div class="col-md-4">
<img src="/img/picture3.jpg" class="img-responsive">
</div>
</div>
Bootply
What width in px should I use for the pictures, i want the highest quality for the picture thats possible.
Im not overruling any bootstrap css so its for default bootstrap 3.
Also i know the larger the image resolution the better the quality, but a 4k image would be useless on a div sm in bootstrap and is a waste of resources.
Assuming that you use fixed containers and an untasted bootstrap CSS the container width for small devices is 750px (720px + grid-gutter-width).
That means the widest possible column/image can be 720px (container width - gutter). So if you want to guarantee the images are displayed in best quality they must be at least 720px wide and 1440px to cover retina screens.
There is not a maximum browser width so the short answer is "as big as you can" (but take into account that the bigger the image is, the longer it takes to load).
What I would to is to do it in a way similar to Bootstrap. Bootstrap sizes go from extra-small to large and it considers large containers (when not fluid) to be 1170px width, so it has to be at least a third of that, 390px (330px if we remove the gutter space).
Moreover, it is shown at full width at small screens which bootstrap consider to have 750px (720px if we remove the gutter space) so the minimum updates to 720px.
But, if you want your web to look great on retina devices or similar, you should use images twice as big, so the result would be 1440px (but you should use those big ones just in that kind of devices)
I would look for a compromising solution between size and weight.
The col-md-4 class forces bootstrap to split the three horizontal images into three columns when the browser width is 768 pixels or less. The gutter width is 15px so
the best image width is 738px.
This would work for screen widths up to 3*768 = 2304px.
Most screens will be covered under this (see below)
https://www.w3schools.com/browsers/browsers_display.asp
For larger widths you should test depending on your requirements...
I'm wondering what the best way is to accomplish the below responsive design using Bootstrap 3. I have only been able to get it to look somewhat like my goal, which is the following:
REGULAR-SIZED MONITOR GOAL:
MOBILE DEVICE GOAL:
What I have tried so far: Here is the best I can do to accomplish the above.
HTML:
CSS:
300px is just going off of what looks decent on my screen, but I would prefer the responsive design to control the page shrinking and growing rather than this number. What would work perfectly is to simply use text-align:left and text-align:right, but the problem with that is when the responsive design kicks in, the mobile device still has them on the left and right side instead of both of them on the left side. I want them both on the left side stacked on top of each other. My code works above, but I am pretty sure there is a better way. Thanks for your help.
first and foremost bootstrap has an offset kind of thing where instead of creating the space, or the pads_to_right you can just call a class in the grid system. offset sets the responsive margin with left element. Your code should look like this:
<div class="container">
<div class="row"><!--rows help in the order of the div and positioning-->
<div class="col-md-4">left text</div>
<div class="col-md-4 col-md-offset-4">right text</div>
</div>
</div>
the grid system has md for medium, lg for Large, xs for extra-small and sm for small. All these are breakpoints for screen sizes so setting your code to column of md-4 sets your div to a specific dimension on the medium size screen. So if you want to set something like that for mobile you have to also use col-xs-dimension(1-12). The numbers that follow the screen size have to sum up to 12 . Read more about the grid system here.
<div class="container">
<div class="row"><!--rows help in the order of the div and positioning-->
<div class="col-md-4 col-xs-12">left text</div>
<div class="col-md-4 col-md-offset-4 col-xs-12">right text</div>
</div>
</div>
So here i set the xs to 12 so it occupies the whole space and pushes the next div to the next line.
So i have an website using a three column lay-out with a fixed width of 1000px. I want to convert this to an bootstrap responsive lay-out. What i did was the following:
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-push-2">Main</div>
<div class="col-lg-2 col-lg-pull-8">Left</div>
<div class="col-lg-2">Right</div>
</div>
</div>
I've set the container width for #media (min-width: 1200px) to width : 1000px. The problem i have now is that my sidebars are to small and the middle column is too wide. Changing the left and right col to col-lg-3 makes the colum to wide and the center column to small. I know bootstrap works with percentage so my question is, is this just how bootstrap works and i have to deal with it? Or is it somehow possible to set an fixed width to the sidebars? or is there an other way to make this happen?
thanks
This is how Bootstrap works. If you want to adapt it to your own liking, you should give your Main, Left and Right divs a class of their own and just adapt the % in your CSS.
Just be aware that creating your own %-width DOES NOT make it responsive! What I mean to say is that your divs will resize according to the browser-width, resulting in a very skinny website on mobile phones. Best is to combine this solution with Bootstrap, so Bootstrap takes over whenever your browser gets under X pixels wide, or to write your own #media and change the look of your website according to the width of the page.
Edit: Of course you could also try and override the bootstrap width in your own CSS, but this might result in some weird things when you use the same col-width again on another page.
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 :)
I am planning a fluid-design based layout with 2 cols as follows;
Below is the HTML code:
<div id="container">
<div class="fl wd5percent"><img src="titleText.jpg" /></div>
<div class="fl wd95percent"></div>
</div>
Here the 1st col contains the image for title text and remaining width is used for other content.
Now my issue is as this is a fluid layout, I cannot use "px" width anywhere... I define img to use max-width:100%, but that kind of creates blank space (or gap) below the titleText image when the 2nd col height is more.
How do I define my CSS such that the page scales well as the browser is resized. By that, I mean whatever be the browser size, the titleText image would be displayed to occupy full height as the content height of 2nd col..
Again, I cannot use px width or height anywehere in my CSS. So I cannot say, width:200px;height:100px
Please see the below fiddle link:
http://jsfiddle.net/thilakar/xKrws/2/