Webpage MetroUI CSS span two rows on a column
I am trying to make a grid where it is 3 columns in a windows metro tile format using MetroUI. The first column has two wide tiles stacked vertically. The second column is a large tile carousel. Then the third column is again two wide tiles stacked vertically. This code does look good but on resizing the browser size it overlaps the tiles and the carousel. What is the correct way of laying this out? Also tried with Bootstrap grid but then get wide margins.
<div class="container main-tiles-2">
<div class="tile-area no-padding">
<div class="tile-container bg-color-tile-light-pantone" style="width: 100%">
<div class="flex-grid">
<div class="row cells3 cell-auto-size">
<div class="tile-container no-padding" style="width: 28%">
<div class="tile-wide bg-darkBlue fg-white" data-role="tile">
<div class="tile-content iconic">
<span class="icon mif-calendar"></span>
<span class="tile-label">Calendar</span>
</div>
</div>
<div class="tile-wide bg-orange fg-white" data-role="tile">
<div class="tile-content iconic">
<span class="icon mif-users"></span>
<span class="tile-label">Room Bookings</span>
</div>
</div>
</div>
<div class="cell tile-large ol-transparent" data-role="tile">
<div class="tile-content">
<div class="carousel" data-role="carousel" data-height="100%" data-width="100%"
data-controls="false">
<div class="slide">
<img src="images/main%20image.jpg" data-role="fitImage"
data-format="fill"
alt="Picture of the Day One">
</div>
<div class="slide">
<img src="images/scenery1.jpg" data-role="fitImage" data-format="fill"
alt="Picture of the Day One">
</div>
<div class="slide">
<img src="images/scenery2.jpg" data-role="fitImage" data-format="fill"
alt="Picture of the Day One">
</div>
</div>
</div>
</div>
<div class="tile-container no-padding" style="width: 33%">
<div class="tile-wide bg-darkTeal fg-white" data-role="tile">
<div class="tile-content iconic">
<span class="icon mif-list2"></span>
<span class="tile-label">News</span>
</div>
</div>
<div class="tile-wide bg-cobalt fg-white" data-role="tile">
<div class="tile-content iconic">
<span class="icon mif-books"></span>
<span class="tile-label">Staff Contacts</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Like this it looks just doesnt resize well:
Solution
The overriding the CSS to change the margins for grids and also filling the width of the tiles to a larger size of the grid space available.The resize works perfectly now.
<!-- First row of tiles -->
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-12 my-column">
<div class="tile-wide bg-darkBlue fg-white" data-role="tile">
<div class="tile-content iconic">
<span class="icon mif-calendar"></span>
<span class="tile-label">Calendar</span>
</div>
</div>
<div class="tile-wide bg-orange fg-white" data-role="tile">
<div class="tile-content iconic">
<span class="icon mif-users"></span>
<span class="tile-label">Room Bookings</span>
</div>
</div>
</div>
<div class="col-md-4 col-xs-12 my-column">
<div class="tile-large ol-transparent" data-role="tile">
<div class="tile-content">
<div class="carousel" data-role="carousel" data-height="100%" data-width="100%"
data-controls="false">
<div class="slide">
<img src="images/main%20image.jpg" data-role="fitImage"
data-format="fill"
alt="Picture of the Day One">
</div>
<div class="slide">
<img src="images/scenery1.jpg" data-role="fitImage" data-format="fill"
alt="Picture of the Day One">
</div>
<div class="slide">
<img src="images/scenery2.jpg" data-role="fitImage" data-format="fill"
alt="Picture of the Day One">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-xs-12 my-column ">
<div class="tile-wide bg-darkTeal fg-white" data-role="tile">
<div class="tile-content iconic">
<span class="icon mif-list2"></span>
<span class="tile-label">News</span>
</div>
</div>
<div class="tile-wide bg-cobalt fg-white" data-role="tile">
<div class="tile-content iconic">
<span class="icon mif-books"></span>
<span class="tile-label">Staff Contacts</span>
</div>
</div>
</div>
</div>
And the CSS
.row {
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
}
.my-column {
padding-top: 1px;
padding-bottom: 1px;
padding-right: 2px;
padding-left: 1px;
}
/**
Overrides Metro UI Css
*/
.tile-large {
width: 99%;
font-size: 20px;
font-family: "Helvetica Neue";
}
.tile-wide {
width:99%;
font-size: 20px;
font-family: "Helvetica Neue";
}
.tile {
width: 99%;
font-size: 20px;
font-family: "Helvetica Neue";
}
- Is it possible to pull css values with HTA javascript?
- How to secure my login page
- pixel.gif, why do people use it?
- apple-mobile-web-app-status-bar-style in ios 10
- Using margin:auto to vertically-align <div>
- Contact Form Submit Button link to Email
- Generate random image by url
- Cross-reference (named anchor) in markdown
- Unable to make text bold in SVG
- Is there a way to create your own html tag in HTML5?
- Show hide divs on click in HTML and CSS without jQuery
- input type color default color input as HEX
- Can't vertical scroll page on mobile devices with full width PrimeNg carousel
- font size is not working when using from html
- Using custom HTML Tags
- Giving wrapped flexbox items vertical spacing
- force element to display outside of overflow:hidden
- Using css how so I create a pill shape which is circular on one side and angled on the other?
- How to make a pill shape button with HTML and CSS?
- Can I add a custom attribute to an HTML tag?
- Why is my Bootstrap table overflowing the containing card?
- Why are level 1 headings the same size as other headings?
- WAI-ARIA Roles for Carousels (a.k.a. sliders, slideshows, galleries)
- What is the difference between localStorage, sessionStorage, session and cookies?
- Change text with a CSS3 animation?
- Changing the Style of a specific element by Checkbox:Checked
- slideDown jumps abruptly at the end
- React ${} string replacer doesn't work
- Favicon not working
- Formatting a nested table in HTML