I have simple 3-column layout based on Twitter Bootstrap. The only problem is, that each column is assembled from block with different heights.
<div class="container">
<div id="blocks" class="row">
<div class="span4">
<div class="block" id="block1">
<div class="block" id="block4">
<div class="block" id="block7">
</div>
<div class="span4">
<div class="block" id="block2">
<div class="block" id="block5">
<div class="block" id="block8">
</div>
<div class="span4">
<div class="block" id="block3">
<div class="block" id="block5">
<div class="block" id="block9">
</div>
</div>
</div>
.
It works quite fine, except for small displays. Then the order of blocks is not sorted.
Is there some way to achieve sorted blocks without any JavaScript?
There is no way to achieve this effect with the 3 column structure. If the blocks were all the same height then you could float:left all the blocks without the columns then they would wrap in order. Since they are not the same size you would have to use a JavaScript such as masonry:
http://masonry.desandro.com/
Its gonna be quite difficult to achieve this, you might wanna play around with single list with float: left; or display: inline-block;
or
you can have 2 set of list with #media inside the css, so depend on the screen size you can show or hide the selected div
css example
#media screen and (min-width: 768px) and (max-width: 1024px) {
.displayFullScreen {display: block;}
.displayMobileScreen {display: none;}
}
#media screen and (max-width: 767px) {
.displayFullScreen {display: none;}
.displayMobileScreen {display: block;}
}
Other way is to use column-count: 3; and column-gap: 10px;. But order is different on wide screen.
Fiddle: https://jsfiddle.net/ksvx2txb/102/
Related
For larger screens I have a scenario where I can display an image next to some text like this:
<div class="wrapper">
<div>
<img>
</div>
<div>
<div> text</div>
<div> text</div>
<div> text</div>
</div>
</div>
For smaller screens, I want to eliminate the wrapper so that the image stacks on top of the text; but I can't figure out how to eliminate the div with the wrapper class to let the image stack on top of the image. My issue isn't using media queries, it's eliminating the outer wrapper when I apply the media queries.
Any suggestions?
You can use display:contents for this...
These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes.
.wrapper {
display: flex;
}
#media (min-width: 601px) {
.wrapper {
display: contents;
}
}
<div class="wrapper">
<div>
<img src="https://s3.amazonaws.com/baconmockup/img/baconmockup-200-130.jpg" alt="">
</div>
<div>
<div> text</div>
<div> text</div>
<div> text</div>
</div>
</div>
you can use JavaScript to remove the selector nullifying the wrapper.
var wrapper=document.querySelector('.wrapper')
if(window.innerWidth < 500){
wrapper.classList=""
}
UPDATE:
My answer is incorrect-- you apparently can do this with media queries. See Paulie_D's answer to this post for more details.
Original Answer:
You cannot use media queries to eliminate a container while leaving its children in place. The way to do this would be to duplicate the content without the wrapper for smaller screens:
#media (max-width: 800px) {
.showOnLargeScreens {
display: none;
}
}
#media (min-width: 801px) {
.showOnSmallScreens {
display: none;
}
}
<div class="wrapper">
<div class="showOnLargeScreens">
<p>Large screen!</p>
</div>
<p class="showOnSmallScreens">Small screen!</p>
<div>
<div> text</div>
<div> text</div>
<div> text</div>
</div>
</div>
When I alter the screen size to a phone view, <div>'s seem to stack in a different order. Is there a way to enforce divs to stack a particular order with media queries, I've tried to search everywhere and cannot find a simple way to do this. I am using Foldy Grids just to use for the responsiveness of them.
Order of divs on a full screen is:
1.)Image on left, text on right
2.)Text on left, image on right
When it goes to a mobile view, I would like it to be stacked from top to bottom in order of:
1.)Image
1.)Text
2.)Image
2.)Text
At present, they order as:
1.)Image
1.)Text
2.)Text
2.)Image
html:
<!-- First section -->
<div class="row">
<div class="grid-2">
<img src="images/EnrolYourself2Small.png">
</div>
<div class="grid-4">
<h1 class="left-align fontAmaticH1">Text............</h1>
<p class="left-align fontPlayfair">More text...........</p>
</div>
</div>
<br>
<!-- Second section -->
<div class="row">
<div class="grid-4">
<h1 class="left-align fontAmaticH1">2nd text.........</h1>
<p class="left-align fontPlayfair">more of 2nd div text........</p>
</div>
<div class="grid-2">
<img src="images/MonitorProgressSmall.png">
</div>
</div>
you should have a look at CSS media queries.
this link might provide you a basis for what you want
For ordering your content, you can choose CSS grid:
Link for the exmaples
And use grid-template on each query depending on the device you are displaying your content
Example:
.main{
display:grid;
grid-template:
'imagespace1'
'textspace1'
'imagespace2'
'textspace2'
}
.image1{
grid-area: imagespace1
}
.image2{
grid-area:imagespace2
}
.text1{
grid-area:textspace1
}
.text2{
grid-area:textspace2
}
#media only screen and (max-width: 500px) {
/* For mobile phones: */
[class*="main"] {
grid-template:
'imagespace1'
'imagespace2'
'textspace1'
'textspace2'
}
}
<div class='main'>
<div class='image1'>image1</div>
<div class='image2'>image2</div>
<div class='text1'>text1</div>
<div class='text2'>text2</div>
</div>
I am trying to design a responsive website. For mobile view, I want to hide the right banner div from sample code below so I just write'display: none;' but the container div came up and overlay with the row div. I just want to hide the right banner without any affect alignment of other divs. Could you please help me if I can sets height for row div or any other issues?
<div class="row clearfix">
<div class="left-banner">
<img src="" alt="">
</div>
<div class="right-banner">
<img src="" alt="">
</div>
</div>
<div class="container">
<p></p>
</div>
.row{width:100%;}
.left-banner{float:left; width:60%;}
.right-banner{float:right; width:40%; display:none;}
.container{width:100%;}
You should use visibility: hidden instead of display: none so that other elements' position is not affected.
Use CSS media query.
#media (max-width: <desired width of viewport>) {
.right-banner{
display:none;
}
}
Media query is use to adjust your design according to desired viewport.
have a read- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
EDIT
You can try to use visibility:hidden on your right-banner instead of display:none, this way even if its hidden the space will still remain as if the right-banner is still there.
You have only to declare in the div-container float: left, than your code will work :)
jsfiddle
<div class="row clearfix">
<div class="right-banner">
<img src="http://im1.book.com.tw/image/getImage?i=http://www.books.com.tw/img/001/061/38/0010613865.jpg&w=348&h=348" alt="" />
</div>
<div class="left-banner">
<img src="http://im1.book.com.tw/image/getImage?i=http://www.books.com.tw/img/001/061/38/0010613865.jpg&w=348&h=348" alt="" />
</div>
</div>
<div class="container">
<p>Test</p>
</div>
Here is the css part:
.row{width:100%;}
.left-banner{width:50%;float:left;}
.right-banner{width:50%;float:right;display:none;}
.container{width:100%;float:left;}
Why don't you try media queries ?
#media all and (max-width: 658px) { // for mobile
.right-banner{
float:right; width:40%; display:none;
}
}
I have 3 HTML div elements that I'd like to see sit side-by-side on a wide screen but, as the screen width collapses, I'd like to see them become vertical.
For example...
Wide screen:
-----------
abc def ghi
-----------
Narrow screen:
abc
def
ghi
Currently, having three HTML divs that look as follows (in another div block) only lays them out vertically...
<div id="Master_Div">
<div id="Div_1">
<p>abc</p>
</div>
<div id="Div_2">
<p>def</p>
</div>
<div id="Div_3">
<p>ghi</p>
</div>
</div>
Maybe, the answer is tied to media queries and/or responsive design but I'm not sure.
Thanks for any help you can offer.
I would do something like this unless you actually need to apply an ID, classes are easier for multiple divs with one assignment in css, plus they take up less space.
html---
<div class="wrapper">
<div class="third">Something here</div>
<div class="third">Something here</div>
<div class="third">Something here</div>
</div>
css---
.third {
width: 33.333333%
float:left;
}
#media screen and (max-width: 767px) {
.third {
width: 100%;
float:none;
}
}
Yes, there are media queries that allow you to control layout for mobile screens, ex:
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
/* stack vertically */
}
A simple media query can do this.
/* Apply inner styles if the viewport's width is at least 500px */
#media (min-width: 500px) {
.responsive {
width:33.3333%;
float:left;
}
}
<div id="Master_Div">
<div class="responsive" id="Div_1">
<p>abc</p>
</div>
<div class="responsive" id="Div_2">
<p>def</p>
</div>
<div class="responsive" id="Div_3">
<p>ghi</p>
</div>
</div>
Your problem is best resolved by natural design patterns without resorting to media queries. Think about it this way , if you lay out your columns side by side using css float:left; and you define some min-width value per column. then as soon as the screen width becomes smaller than the width value you defined X 3 , your columns will be laid out vertically
Hopefully this image explains exactly what I'm trying to accomplish:
Since the blue block represents a simple list, I think it may be easier to just output the block twice, and apply a "desktop-only" and "mobile-only" class, then use that class to dictate visibility, but I was curious to know if the above is possible with pure HTML/CSS out of box for Bootstrap 3?
This should work:
<div class="row">
<div class="col-md-4">First</div>
<div class="col-md-8" id="big">Big</div>
<div class="col-md-4">Second</div>
</div>
And CSS:
#media (min-width: 769px) {
#big {
float: right;
}
}
Here is an example: http://jsfiddle.net/8r4g20cr/1/
I'm not sure if it possible but from your layout you need something like:
<div class="row">
<div class="col-md-4">
<div class="marron"></div>
<div class="blue"></div>
</div>
<div class="col-md-8">
<div class="green"></div>
</div>
</div>
When you the screen resized, the div in rows will be stacked up orderly. I don't think I can reorder it for mobile devices. Stay tune for other opinions.