I am trying to build a responsive web layout with w3.css. It is supposed to consit of rows with three columns on large screens, two on medium, and one column on small/mobile devices. Each row consists of tiles which can have one of two fixed heights.
<div class="w3-content w3-white" style="max-width:600px">
<div class="w3-row-padding ">
<div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">1</div>
<div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">2</div>
<div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">3</div>
<div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">4</div>
<div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">5</div>
<div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">6</div>
<div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">7</div>
</div>
</div>
I'd expect the following result in a large screen in 3 columns layout:
The above code is fine with a one and two column layout, but produces the following unwanted output with three columns:
If I end the w3-row-padding after three tiles, the three column layout is ok, but I get a mess with medium screens with two columns
<div class="w3-content w3-white" style="max-width:600px">
<div class="w3-row-padding">
<div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">1</div>
<div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">2</div>
<div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">3</div>
</div>
<div class="w3-row-padding">
<div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">4</div>
<div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">5</div>
<div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">6</div>
</div>
<div class="w3-row-padding">
<div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">7</div>
</div>
</div>
This is what the above code produces on medium screens:
Any help is appreciated
Would this do the trick for you?
https://codepen.io/panchroma/pen/BmXOOe
HTML is exactly as you posted except that I've added the class of 'parent' to the w3-row-padding. We'll use this class to target child columns with the CSS.
HTML
<div class="w3-content w3-white" style="max-width:600px">
<div class="w3-row-padding parent"> <!-- note new class in this line -->
....
</div>
</div>
CSS is
#media (min-width: 993px){
.parent .w3-col:nth-child(3n + 1){
clear:left;
}
}
The logic in this css is when the viewport is 993px or wider (the width at which the w3.css grid changes from 2 columns wide to 3 columns wide), use the nth-child selector to select the 1st, 4th, 7th, 10th, ... (3n +1) column in the row and apply the rule of clear:left. This ensures that this column will float to the start of the next row.
More info about how the nth-child selector works:
https://css-tricks.com/how-nth-child-works/
Hope this helps!
Related
This is my template file from Angular:
<div class="container-fluid">
<div class="row">
<div class="col bg-dark text-white">
<a class="navbar-brand">SPORTS STORE</a>
</div>
</div>
<div class="row text-white">
<div class="col-3 bg-info p-2">
{{categories.length}} Categories
</div>
<div class="col-9 bg-success p-2">
{{products.length}} Products
</div>
</div>
</div>
So in the second one, so we have one row and two columns of 3 and 9 in that row.
My question is why they are breaking in two lines?
I have problem by filtering max price into ng-repeat, this is my code:
<div class="input-field col s6">
<i class="material-icons prefix">search</i>
<input id="icon_prefix" type="text" class="validate" ng-model="maxPrice">
<label for="icon_prefix">Filtra per prezzo massimo</label>
</div>
<div class="row">
<div class="col s12 m6 l4"
ng-repeat="result in results | max:{result.PREZZO<=maxPrice}">
whats the problem?
I can think of 2 solutions,
1) Create a custom filter
js
$scope.customFilter = function(result){
if(result.PREZZO <= $scope.maxPrice){
return true;
}
else{
return false;
}
}
html
<div class="col s12 m6 l4" ng-repeat="result in results | filter:customFilter></div>
2) You can loop through and filter your list on ng-change of your maxPrice and use the filtered array in your ng-repeat.
You need to create a custom filter for that. (I don't know if max is your custom filter?)
You can read more here: https://docs.angularjs.org/guide/filter
Another way is simply by using ng-if:
<div class="col s12 m6 l4" ng-repeat="result in results" ng-if="result.PREZZO <= maxPrice">
You can use ng-if directly in this case
<div class="input-field col s6">
<i class="material-icons prefix">search</i>
<input id="icon_prefix" type="text" class="validate" ng-model="maxPrice">
<label for="icon_prefix">Filtra per prezzo massimo</label>
</div>
<div class="row">
<div class="col s12 m6 l4" ng-repeat="result in results" ng-if="result.PREZZO <= maxPrice"></div>
</div>
I have a basic grid on materializeCSS my problem is my column is not the same height so my layout became a mess. I know this has been ask on bootstrap but none of the solution works for me in materializeCSS
This is my jsfiddle https://jsfiddle.net/zrb46zr2/1/
<div class="row">
<div class="col m4 s6">
<img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
<p>
Looooong Looooong Looooong Looooong Looooong text
</p>
</div>
<div class="col m4 s6">
<img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
<p>
Short text
</p>
</div>
<div class="col m4 s6">
<img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
<p>Short text</p>
</div>
<div class="col m4 s6">
<img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
</div>
<div class="col m4 s6">
<img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
</div>
<div class="col m4 s6">
<img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
</div>
</div>
I actually found a simple solution but it requires a plugin and jquery and also i am not sure on the cons of doing this.
But please feel free to share your own solution i really want to fix this with maybe pure CSS
Anyway the code is like this
read and install this script: https://github.com/liabru/jquery-match-height
HTML
<div class="row">
<div class="col m4 s6 sample">
<img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
<p>
Looooong Looooong Looooong Looooong Looooong text
</p>
</div>
<div class="col m4 s6 sample">
<img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
<p>
Short text
</p>
</div>
<div class="col m4 s6 sample">
<img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
<p>Short text</p>
</div>
<div class="col m4 s6 sample">
<img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
</div>
<div class="col m4 s6 sample">
<img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
</div>
<div class="col m4 s6 sample">
<img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
</div>
</div>
Javascript
$(document.ready(function(){
$('.sample').matchHeight();
});
This can be easily fixed with the proper use of the grid system.
In your code, you have 6 div elements that you give a size of "col m4 s6" each. Adding all of these divs together equals 24 medium columns or 36 small columns. These 24 medium columns/36 small columns are placed within a single row which only works with a max layout of 12 columns.
To alleviate this, wrap each group of elements that equal 12 column widths within their own row:
<div class="row">
<div class="col m4">
<p>Content</p>
</div>
<div class="col m4">
<p>More Content</p>
</div>
<div class="col m4">
<p>Even More Content</p>
</div>
<!-- No more room for content as three m4-sized columns equal 12.
Any additional content should be placed within a new row-->
</div>
<div class="row>
<!--Additional content up to 12 column widths go in here-->
</div>
...
I updated your initial fiddle to demonstrate this. You'll see that the column heights have been fixed as well.
With SASS, I use clear:left on the first col.
Example for a s4 m3 l2:
#media #{$small-and-down}{
.col:nth-child(3n+1) {
clear: left;
}
}
#media #{$medium-only}{
.col:nth-child(4n+1) {
clear: left;
}
}
#media #{$large-and-up} {
.col:nth-child(6n+1) {
clear: left;
}
}
Here's a simple trick using pure CSS -
.row-flex {
display: flex !important;
}
.row-flex .col {
min-height: 100% !important;
}
Apply this rule to your row element:
<div class="row row-flex">
<div class="col m4 s6 sample">
<img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
<p>
Looooong Looooong Looooong Looooong Looooong text
</p>
</div>
<div class="col m4 s6 sample">
<img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
<p>
Short text
</p>
</div>
<div class="col m4 s6 sample">
<img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
<p>Short text</p>
</div>
<div class="col m4 s6 sample">
<img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
</div>
<div class="col m4 s6 sample">
<img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
</div>
<div class="col m4 s6 sample">
<img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
</div>
</div>
Now, all your columns are 100% of the height of the row and your row's height is equal to the height of the longest column within it.
Note: if you are going to use a single column layout on small screens (with the s12 class, for example), you'll need a media query to set .row-flex to display: block when the screen is small.
Hope this helps.
Problem
I need to display two different images in a row but
in my code its repeat the first image
then display the second image in other row
I don't know what wrong with my code.
<div class="container" ng-controller="dashbordController">
<div class="row">
<div class="col-lg-4">
<div class="thumbnail" ng-repeat="image in images">
<img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="thumbnail" ng-repeat="image in images">
<img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
</div>
</div>
</div>
</div>
</div>
app.controller("dashbordController",function($scope){
$scope.images = [
{"thumbnail":"./views/img1.png", "description":"Image 01 description"},
{"thumbnail":"./views/img2.png", "description":"Image 02 description"},
{"thumbnail":"./views/img1.png", "description":"Image 03 description"},
{"thumbnail":"./views/img2.png", "description":"Image 04 description"},
{"thumbnail":"./views/img1.png", "description":"Image 05 description"}
];
});
our are using two row templates, so every thumbnail is shown on it's own row.
try using this code:
<div class="container" ng-controller="dashbordController">
<div class="row">
<div class="col-sm-6" ng-repeat="image in images">
<div class="thumbnail">
<img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
</div>
</div>
</div>
I had changed the col class too. With lg it's only for high resolutions.
Hope this does it.
I am working with the code below and trying to determine what makes the cols stack on one another. The code looks fine in desktop view, but when I look at it on mobile, the last two col-xs-12 stack together right on top of one another. Is there a break code to make it put a hard return between the two col's in mobile viewing?
<div class="panel panel-default">
<div class="panel-body2">
<div class="row vertical-align">
<div class="col-xs-6 col-sm-3">
<h5><small>Saturday<br>
</small>Feb. 13</h5>
</div>
<div class="col-xs-6 col-sm-3 text-right">
<h5><small>TCU<br>
</small>Horned Frogs</h5>
</div>
<div class="hidden-xs col-sm-3 text-left">
<img src="http://www.wvusports.com/content/images/graphics/logos/TCU.png" width="45">
</div>
<div class="col-xs-12 col-sm-3 text-center">
<span class="label label-warning"><i class="fa fa-ticket"></i> ON SALE SOON</span>
<div>
<img class="hidden-xs" style="padding-top:2px" src="http://www.wvusports.com/content/images/graphics/logos/Big12.png" width="25">
</div>
</div>
<div class="col-xs-12">
<div class="alert alert-success" role="alert">Family Day - $70</div>
</div>
</div>
</div>
</div>