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";
}
- How to set iframe size dynamically
- Making a img appear/disappear in html5
- How to escape HTML
- Bootstrap label overlay
- Stuck showing my information taken from the input field
- Ant Design Table with vertical and horizontal scroll
- Two div blocks on same line
- How to allow 'Open in a new tab' when using ng-click?
- Applying zoom into point like Aseprite
- Specifying multiple targetOrigin uris in postmessage
- Get input field value from Elementor Pro Form
- How to Submit a form without reloading page
- How to determine if element is last or first child of parent in javascript/jquery?
- Moving mat-icon to left of expansion panel header title?
- How do I position the buttons at the bottom in the q-input field?
- Dynamically changing the attributes of a HTML element?
- Where do I get a "3 horizontal lines" symbol for my webpage?
- Escape </ in script tag contents
- Find html label associated with a given input
- border-box of input not working as expected
- Typescript error "Property 'value' does not exist on type 'HTMLElement'", "Property 'onclick' does not exist on type 'Element'"
- How to remove the text-decoration underline; from the span element inside the flex parent?
- Emojis in Angular html template
- How to make a delete button to delete an item, to which it belongs, from the list?
- Bootstrap tabs in Chrome extension popup
- <mat-toolbar> changes height of all page
- JavaScript: get custom button's text value
- redirect to appstore or google play
- Is there a way to add a blank data attribute to an element using JavaScript?
- Fixed element positioning relative to its parent