w3-css: Responsive 3 columns layout with different height blocks - responsive-design

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

Trying to retrieve SPAN tags within nested DIV tags using JSOUP

Hello I am trying to extract the span tags that are in nested DIV tags, using JSoup. The code below is just a snippet of larger code.
<div class="formitem formgroup horizontal">
<div class="formitem formgroup horizontal">
<div class="formitem formgroup vertical" style="width:325px">
<div class="formitem formgroup horizontal">
<div class="formitem formgroup vertical" style="width:325px;">
<div class="formitem formgroup horizontal">
<span class="formitem formfield">
<span class="value" style="font-weight:bold">47 Lower River St</span>
</span>
<span class="formitem formfield">
<span class="value" style="font-weight:bold">531</span>
</span>
</div>
</div>
</div>
<div class="formitem formgroup horizontal">
<span class="formitem formfield">
<span class="value" style="font-weight:bold">Toronto</span>
</span>
<span class="formliteral formitem" />
<span class="formitem formfield">
<span class="value">Ontario</span>
</span>
<span class="formliteral formitem" />
<span class="formitem formfield">
<span class="value">M5A0G1</span>
</span>
</div>
</div>
<div class="formitem formgroup vertical" style="width:150px;">
<div class="formitem formgroup horizontal">
<span class="formitem formfield">
<label>List:</label>
<span class="value" style="font-weight:bold">$279,900</span>
</span>
<span class="formitem formfield">
<label>For:</label>
<span class="value" style="font-weight:bold">Sale</span>
</span>
</div>
</div>
</div>
<span class="formitem formfield">
<span class="value">Toronto C08</span>
</span>
<span class="formliteral formitem" />
<span class="formitem formfield">
<span class="value">Moss Park</span>
</span>
<span class="formliteral formitem" />
<span class="formitem formfield">
<span class="value">Toronto</span>
</span>
<span class="formitem formfield">
<span class="value">120-21-S</span>
</span>
</div>
I am trying to extract the text in the last SPAN tags (Toronto C08, Moss Park, Toronto and 120-21-S)
<span class="formitem formfield">
<span class="value">Toronto C08</span>
</span>
<span class="formliteral formitem" />
<span class="formitem formfield">
<span class="value">Moss Park</span>
</span>
<span class="formliteral formitem" />
<span class="formitem formfield">
<span class="value">Toronto</span>
</span>
<span class="formitem formfield">
<span class="value">120-21-S</span>
</span>
I have parsed other parts of the document with success however, I can't seem to isolate these spans. The snippet of code is from a much larger page (full page). I may be using the wrong approach, but here is what I did to capture the spans between the parent DIV (results at top of post).
Elements elements = doc.select("div[class=formitem legacyBorder formgroup vertical]");
Element zoneElement = elements.select("div[class=formitem formgroup vertical")
.select("[style=width:500px]").select("div[class=formitem formgroup horizontal").first();
So now I have the first element but I need the last 6 span tags at the end of the block of selected code. Thanks
Open your browser's developer tool (F12), select the "inspect elements" tool, highlight the field you want (e.g. TORONTO C08) and choose its css selector. For "TORONTO C08" it will be:
#C3627690 > div:nth-child(3) > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) > span:nth-child(2) > span:nth-child(1)
Do the same for all the other elemens. After getting all the selectors, check them closely - maybe they have a common pattern (e.g different only at the 3rd value), so you will be able to iterate over them with a loop.

Jade error producing nested classes

.container-fluid('padding-bottom:15px;color:#fff')
.row
.col-md-6
| column 1
.col-md-6
| column 2
what's wrong with my jade above?
There are two errors in your example:
Wrong indents.
You can't set inline styles like that.
Try this
.container-fluid(style='padding-bottom:15px;color:#fff;')
.row
.col-md-6
| column 1
.col-md-6
| column 2
It will compile to
<div style="padding-bottom:15px;color:#fff;" class="container-fluid">
<div class="row">
<div class="col-md-6">column 1</div>
<div class="col-md-6">column 2</div>
</div>
</div>
Otherwise you would get something like this
<div padding-bottom:15px;color:#fff="padding-bottom:15px;color:#fff" class="container-fluid">
<div class="row">
<div class="col-md-6">column 1</div>
<div class="col-md-6">column 2</div>
</div>
</div>

MaterializeCSS how can i make row column height the same?

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;
}
}

Foundation 5: removing a gap at the left of my column

I want to get rid of the gap at the left of my green button on this screenshot. I can't seem to find any way to remove it.
Markup:
<div class="row">
<div class="small-4 medium-5 large-4 columns">
<a class="button" id="enroll_in_mooc" href="#">Enroll in MOOC</a>
</div>
<div class="small-6 medium-5 large-6 columns">
<ul class="small-block-grid-1 large-block-grid-2" id="jason_computing_features_list">
<li id="jason_computing_self_paced">Self-paced</li>
<li id="jason_computing_hours_week">4 hours a week</li>
<li id="jason_computing_assignments">3 Assignments</li>
<li id="jason_computing_challenges">18 Challenges</li>
</ul>
</div>
</div>
aa
By default, Foundation applies a right and left padding to columns. I've created a snippet with a couple of options. You can target the column; or simply create a class and add a rule for left-padding.
/* -- target the first-child column -- */
.row .columns:first-child {
padding-left: 0;
}
/* -- create a class ('button-enroll' for example ) -- */
.button-enroll {
padding-left: 0;
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.6/css/foundation.min.css" rel="stylesheet"/>
<div class="row">
<div class="small-4 medium-5 large-4 columns button-enroll">
<a class="button" id="enroll_in_mooc" href="#">Enroll in MOOC</a>
</div>
<div class="small-6 medium-5 large-6 columns">
<ul class="small-block-grid-1 large-block-grid-2" id="jason_computing_features_list">
<li id="jason_computing_self_paced">Self-paced</li>
<li id="jason_computing_hours_week">4 hours a week</li>
<li id="jason_computing_assignments">3 Assignments</li>
<li id="jason_computing_challenges">18 Challenges</li>
</ul>
</div>
</div>

Big gap centering 2 column form with foundation

I have a simple 2-column form that I want centered on the page. Not sure why there's a 3 inch gap in between the columns
<form id="frm" action="profile" method="post" class="custom">
<div class="row">
<div class="small-4 small-centered columns">
<div class="row">
<div class="small-1 columns"><span id="makemeboldlbl" class="inline radius secondary label right">Email:</span></div>
<div class="small-3 columns"><input type="email" id="profile_email" value="test#test.com" /></div>
</div>
<div class="row">
<div class="small-1 columns"><span id="makemeboldlbl" class="inline radius secondary label right">Username:</span></div>
<div class="small-3 columns"><input type="text" id="profile_username" value="TestIt" /></div>
</div>
</div>
</div>
</form>
Yep.Its Nothing but in foundation row's are basically divided into 12 columns okay but in here you are having only two columns, In foundation by default the last column of a row floated into right side.see here check it from your firebug
[class*="column"] + [class*="column"]:last-child {
float: right;
}
in this case you can use your override class for example
.left{
float:left !important;
}
and add it your html
<div class="row">
<div class="small-1 columns"><span id="makemeboldlbl" class="inline radius secondary label right">Email:</span></div>
<div class="small-3 columns left"><input type="email" id="profile_email" value="test#test.com" /></div>
</div>
simple.. :)

Resources