Responsive html div elements? - html

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

Related

Media query issue: resizing/moving blocks

I am trying to have three different layouts
Desktop- image + text block on top of a page
Medium devices- image on top of a page and text on the bottom of the page
Mobile- text on the bottom of the page
I have figured out how I want to do the desktop and the mobile, and I thought I had the medium devices figured out, but it isn't working correctly.
HTML
<div class="some-container--top">
<div class="row">
<div class="column image">
<img src="{image url}" alt="alt" />
</div>
<div class=" column container">
<img src="{image url}" alt="color" />
<div class="text-block">
<h3>title</h3>
<p>text</p>
</div>
</div>
</div>
</div>
<div class="some-container--bottom">
<p>text</p>
</div>
CSS:
#media only screen and (min-width: 1000px){
.some-container--bottom{
display:none;
}
}
#media only screen and(max-width:999px) and (min-width:601px){
.container{
display:none;
}
.some-container--bottom{
display:none;
}
}
#media only screen and (max-width: 600px){
.some-container--top{
display:none;
}
}
So, desktop works (i.e, I have the picture and the text showing up correctly) and mobile works ( I have the text showing up where I want). However, for my medium devices it shows everything( text and image on both bottom and top of page). What is wrong with my code?
There is an error in your css-rule:
#media only screen and(max-width:999px) and (min-width:601px){
^ There must be a space between 'and' and the opening parenthesis
Demo

Remove Bootstrap Top Margin

I have the following in my Bootstrap layout,
<div class="row mt-4" id="content">
<div class="col owl-carousel">
<div class="slide text-center">
<div class="innerslide">
<h1>Registered In Total So Far</h1>
<p class="split-para align-middle">Total: <span id="total-registered"></span></p>
<p class="split-para align-middle">Durban: <span id="durban-registered"></span></p>
<p class="split-para align-middle">Pietermaritzburg: <span id="pmb-registered"></span></p>
</div>
</div>
<div class="slide text-center">
<div class="innerslide">
<h1>Registered In Last Hour</h1>
<p class="split-para">Total: <span>409</span></p>
<p class="split-para">Durban: <span>345</span></p>
<p class="split-para">Pietermaritzburg: <span>74</span></p>
</div>
</div>
</div>
</div>
What I am trying to achieve is set the mt-4 margin-top row to 0, once the screen is between a certain width. The problem I am having is when the page is viewed in landscape mode on certain size tablets or phones it is pushing the content to far down because I am using a fixed-bottom class for the footer row.
What I would like to do is remove that margin if the screen is in portrait mode and at that width. Using Responsinator, if I am understanding correctly. It is happening when the landscape width is between 667px and 736px.
This is basically what I am trying to achieve:
I have tried with the following code but it does not seem to make a difference:
#media (min-width: 650px) and (max-width: 768px) {
#content {
margin-top: 0;
}
}
I hope this makes sense and would be glad to give further information if required.
Thank you.
EDIT: The solution just posting the correct code here in case it helps someone else. Thank you for the help!
#media screen and (orientation: landscape) {
#content {
margin-top: 0 !important;
}
}

Increase height of bootstrap content

i have a div that is a content for a video, and it is working fine, but the problem is, that everytime i try to see how it adapts on diferent devices the height of the video just decrease, i think it is the normal behaviour of bootstrap, but the thing is i need that div to increase when the devices are smaller, how can i do that?
here is my html for the video and text inside
<section class="content_section white_section bg2">
<div class="embed-responsive embed-responsive-16by9">
<div id="video_overlays"></div>
<div class="container vertical-center ">
<div id="over">
<div class="title-wrapper main_title centered upper">
<h2><span class="line"></span>Simple solutions for complex problems</h2>
</div>
<div class="description4 centered">
<p dir="ltr"><b id="docs-internal-guid-7b963bcb-e991-08ff-b846-612f8d57baee">The world is a complex place. </b><br><b>Our solutions are designed to allow organisations to quickly and simply use their information without adding layers and layers of heavy software.<br>
Usability and simple deployment are the key words.</b></p>
</div>
</div>
</div>
<div id="player" width="100%" height="100%" style="z-index:-1">
</div>
</div>
</section>
you can do it using media queries. Assuming that the div holding your video player has id #player. Note all the px and vh values used below are just for an example. you may set them as you want. In the below examples smaller devices have the video player with an increased height.
#media screen and (min-width: 1200px ) {
#player {
height:500px; //or height:50vh
}
}
the above code means that for screen sizes having a width above 1200px the height will be 500px ( you can set it to whatever you want)
#media screen and (max-width: 1199px) and (min-width: 600px) {
#player {
height:700px; //or height:70vh
}
}
the above code means that for screen sizes having a width between 600px and 1199px the height will be 700px. and the code below means for screen resolutions below 600px the height of the video player would be 800px.
#media screen and (max-width: 599px) {
#player {
height:800px; //or height:80vh
}
}
Read more about media queries here :
https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Bootstrap generate fixed width col, but just for large displays, for smaller displays responsive

I would like to generate a fixed width col for big displays with bootstrap, but it should be reponsive if you use it on smaller ones.
<div class="container">
<div class="col-md-3"></div> <-- this should be fixed width 400px for big displays
<div class="col-md-9"></div> <-- content should be always responsive
</div>
Is this possible? Thanks
The best way to get a fixed-fluid layout in Bootstrap 3 is using #media query that works at the same breakpoint as the Bootstrap media queries. So, in your case use the 992px (md) breakpoint...
#media (min-width:992px) {
#sidebar {
min-width: 400px;
max-width: 400px;
}
#main {
width:calc(100% - 400px);
}
}
Bootstrap Fixed-Fluid Layout
You can do this
<div class="container">
<div class="col-md-3 fixed-size-1"></div> <-- this should be fixed width 400px for big displays
<div class="col-md-9 fixed-size-2"></div> <-- content should be always responsive
</div>
CSS
.fixed-size-1{
//specify height and width
}
.fixed-size-2{
//specify height and width
}
Use CSS media queries to add fixed width to them.
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
you can add responsiveness by using
<div class="col-md-9 col-sm-9 col-xs-9"></div> <-- content should be always responsive
this will take 9 column in large tab and mobile screen

Three-column layout with block of different heights

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/