I am trying to convert a page to responsive using bootstrap 3. need 3 divs
in mobile version need DIV2 to display below div3.
Is it possible to do as with current code it displays
DIV1
DIV2
DIV3
Sample page : http://www.examguides.com/Networkplus/network-plus-1.htm
Would this work for you?
https://codepen.io/panchroma/pen/bmbZaG
HTML
<div class="row parent">
<div class="col-md-8 div1">Div 1</div>
<div class="col-md-12 div3">Div 3</div>
<div class="col-md-4 div2">Div 2</div>
</div>
CSS
.row.parent{
position:relative;
}
/* move .div2 to top right of .row.parent when viewport is 992px or more */
#media (min-width: 992px) {
.div2{
position:absolute;
top:0;
right:0
}
}
Related
I would like to set a grid with a set of 3 w-50 cards in each row on desktop devices, and one card per row on smaller devices.
But, if a user responsively makes the browser window smaller, I would like the cards to stay the same width on the desktop, and have the space between them get smaller, rather than the cards themselves get narrower.
Also, is it possible to have the cards be w-50 on desktop, but w-75 on smaller devices.
Sample code:
<div class="row">
<div class="col-sm-12 col-lg-4 " >
<div class="card w-50 ">
<div class="card-header">
Featured
</div>
<div class="card-body ">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="card w-50">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4 ">
<div class="card w-50">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
Simple answer: No
If you want the cards to stay the same when user resizes the window, I don't think it's possible with .w-*, because that's relative percentage width of the whole row being 100%. The cards will shrink as user resizes the windows, unless you allow overflow on the row.
For the same reason I don't know why/how you come up with a thought that you can have 3 w-50 cards in a row on desktop devices. The maximum numbers of w-50 cards you can have in a row is just 2: 100% / 50% = 2.
To have the cards stay the same width as long as they can, you might have to use absolute units such aspx or rem.
<div class="cards">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
One card per row on smaller devices
There is noting you need to do here as by default <div> is set to 100% width. You might just add margins to each card to make them look nice:
.cards .card {
margin-bottom: 1rem;
}
3 cards per row on larger devices
I take larger devices as 576px and large. You can setup media breakpoints there and have .cards displayed as flexbox. And set a fixed with for the cards inside.
#media (min-width: 576px) {
.cards {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.cards .card {
width: 13rem;
}
}
https://jsfiddle.net/davidliang2008/woxsv4nm/24/
How to come up a right width?
Setting the right width of the cards is tricky though. My 2 cents: you might want to setup a right width of the cards for different breakpoints so that there won't be too much space in between cards.
What if you allow overflow?
To force the width of cards to be 50% and have 3 of them in a row, the row must be overflowed. By default, the flexbox children will shrink if there is not enough space. To enforce 50% width, you have to turn that off by setting flex-shrink: 0;:
#media (min-width: 576px) {
.cards {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.cards .card {
width: 50%;
flex-shrink: 0;
}
}
https://jsfiddle.net/davidliang2008/woxsv4nm/26/
But in this case, there is no way you still have gaps between cards.
Right now, when two grid items share the same row and column they overlap each over.
<div class="some-grid-container">
<div style="grid-row: 1; grid-column: 1">Item 1</div>
<div style="grid-row: 1; grid-column: 1">Item 2</div>
</div>
How do I them not overlap? Probably behave like flex items when sharing the same row and column. (Without making an outer container).
Your syntax is not correct.
Inline styles are not using those braces "{", "}".
And additionally you need to specify the "Item 2" in the second column. If you use the same row and same column then both divs are in the same place for sure.
Try...
CSS:
.some-grid-container{
display: grid;
grid-template-columns: auto;
}
HTML:
<div class="some-grid-container">
<div style="grid-row: 1; grid-column: 1;">Item 1</div>
<div style="grid-row: 1; grid-column: 2;">Item 2</div>
</div>
This should create a 100% width grid with 2 equally sized columns.
Wrap the items in a container.
Example:
.some-grid-container {
display: grid;
grid-template-columns: 100px 100px;
}
.some-grid-container>div {
grid-column: 1;
grid-row: 1;
}
.some-grid-container>div>div {
background: red;
}
<div class="some-grid-container">
<div>
<div>Item 1</div>
<div>Item 2</div>
</div>
</div>
This is the ng-view area powered by angular.
You can see the text extends beyond the background image.
How can i adjust the background image size pls ?
<div class="col-xs-12 col-sm-9 col-lg-9" ng-style="{'background-image':'url(images/blue3.jpg)', 'background-repeat': 'no-repeat', 'height':'800px', 'background-size':'contain' }">
<h1> {{message}} </h1>
<div ng-view></div>
</div>
Either let it grow to it's content with height: auto; or make the overflow scroll with overflow-y: scroll;
How can I with use of AngularJS Material Design lib achieve page structure such as described in the official Layout structure guideline and exemplified in the screenshot below? I want to have centralised card breaking the edges of the page toolbar. Codepen example would be highly appreciated.
Edit: related thread: Angular Material Design layout
I figured I'd post this to help others trying to do the same thing with Materialize CSS. You can change the height of the nav-bar, and the size/placement of card.
Demo
HTML
<nav>
<div class="nav-wrapper">
<i class="material-icons">list</i>
</div>
<div class="nav-wrapper">
</div>
</nav>
<
<<div class="row" id="card-placement"> <!-- id added here -->
<div class="col s12 m8 offset-m2">
<div class="card grey lighten-5">
<div class="card-content grey-text text-darken-1">
<h5 class="head">Title</h5> <!-- class added here -->
<div class="divider"></div>
<p>Stuff goes here</p>
</div>
</div>
</div>
</div>
CSS
/* Moves card up into navbar */
#card-placement{
margin-top:-60px
}
/* Moves Title position up to be level with nav bottom */
.head {
margin-top: -2px;
}
nav {
color: #fff;
background-color: #ee6e73;
width: 100%;
height: 112px;
line-height: 56px;
}
.nav-wrapper {
margin-left: 20px;
}
You can easily do this with a little CSS
.card_position{
margin-top:-70px
}
Add this class to the card element.
Currently I have something like this. The "Page" and "Row" elements are created dynamically using javascript.
The problem rises when there are multiple Pages, and a Row in the Page 1 is deleted, for example. The empty space should be filled by the element that is below, if the empty space is at the end of the page, then the first element of the next page should fill the empty space, and so on. At the end it should look like this.
I can solve this rearranging/recreating the entire PageCont.
Is there a way I can achieve this using pure CSS? So the rearranging would be handled by the rendering engine of the browser.
Something like this inline-block but with vertical direction.
Any help is highly apreciated.
HTML:
<div class="PageCont">
<div class="Page">
<div class="Row">1</div>
<div class="Row">2</div>
<div class="Row">3</div>
<div class="Row">4</div>
</div>
<div class="Page">
<div class="Row">5</div>
<div class="Row">6</div>
<div class="Row">7</div>
<div class="Row">8</div>
</div>
<div class="Page">
<div class="Row">9</div>
</div>
</div>
CSS:
.PageCont
{
height: 300px;
width: 350px;
border:2px solid red
}
.Page
{
float:left;
margin-left:10px;
}
.Row
{
height:50px;
width:50px;
background-color:blue;
color:white;
margin-top:10px;
}
The operation could be successfully performed trivially if it included horizontal wrapping, with plain simple CSS. However since this case involves vertical wrapping javascript be necessary with your current implementation. If you were to use columns you wouldn't need the javascript and CSS is all that's needed.
Here is a fiddle where I've implemented it http://jsfiddle.net/eQvaZ/
The HTML is as follows:
<body>
<div class="pageCont">
<div class="Row">C1</div>
<div class="Row">C2</div>
<div class="Row" id="to-remove">C3</div>
<div class="Row">C4</div>
<div class="Row">C5</div>
<div class="Row">C6</div>
<div class="Row">C7</div>
</div>
<div>Removing C3 in 5 seconds...</div>
</body>
The CSS:
.pageCont{
column-count:2;
column-rule:0px;
-webkit-column-count: 2;
-webkit-column-rule: 0px;
-moz-column-count: 2;
-moz-column-rule: 0px;
padding:10px;
height: 250px;
width: 200px;
border:2px solid red
}
.Row {
height:50px;
width:50px;
background-color:blue;
color:white;
margin-bottom:10px;
}
The bit of JavaScript to remove an item:
setTimeout( function(){
var to_remove = document.getElementById('to-remove');
to_remove.parentNode.removeChild(to_remove);
}, 5000);
Let me know if you have any questions regarding this implementation.