Easy Header Widget 3 Column Responsive

[BomAle]

This is a guide for organize header widgets into 3 column, this concept could be extended to 4-5 column with automated configuration (A idea for custom theme).

The options are many but I suggest to leave it as I wrote below:

@media screen and (min-width: 980px) {
	/* c = $c = 3, 3 colonne */
	[data-widgetArea='header'] > ul > li{
		float: left;
		display: inline-block !important;
		padding: 0 !important;
		margin: 0 1% 2% !important; /* m = 1 */
		width: 32%; /*(100-(c*2-2)*m)/c => (100-(3*2-2)*1)/3 = 32 */
		vertical-align: top;
		height: 400px;
		overflow-y: auto !important;
		overflow-x: hidden !important;
	}
	/* http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ */
	[data-widgetArea='header'] > ul > li:nth-of-type(3n+1):nth-last-child(1) {
		width:100%; margin-bottom: 0 !important; margin-right: 0 !important;
	}
	/* 3n+1 first li of each row, 2 second to the last */
	[data-widgetArea='header'] > ul > li:nth-of-type(3n+1):nth-last-child(2),
	[data-widgetArea='header'] > ul > li:nth-of-type(3n+1):nth-last-child(2) ~ li {
		width:49%; margin-bottom: 0 !important;
	}
	[data-widgetArea='header'] > ul > li:nth-of-type(3n+2):nth-last-child(1) {
		margin-right:0 !important;
	}
	[data-widgetArea="header"] > ul > li:nth-of-type(3n+1):nth-last-child(3),
	[data-widgetArea="header"] > ul > li:nth-of-type(3n+1):nth-last-child(3) ~ li {
		margin-bottom: 0 !important;
	}
	/* LAST WIDGET {$c}n*/
	[data-widgetArea='header'] > ul > li:nth-of-type(3n){
		float: none;
		clear: both;
		margin-right: 0 !important;
	}
	/* FIRST WIDGET {$c}n+1*/
	[data-widgetArea='header'] > ul > li:nth-of-type(3n+1){
		margin-left: 0 !important;
	}
	[data-widgetArea="header"]::after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}
}

Copy & Paste this code on custom.css

Source : InvisionITA

Edited July 21, 2017 by BomAle

[AlexWebsites]

This is a nice modification, thanks. However, you can't really add anything above it, I guess that's the reason its a header widget..:) Is there a way to apply this to a lower block position?

Best way to make this 2 column?

[BomAle]

8 hours ago, AlexWebsites said:

 Is there a way to apply this to a lower block position?

for footer(?) change all data-widgetArea="header" header to the area of the widget like footer. or you would for other?

8 hours ago, AlexWebsites said:

Best way to make this 2 column?

yes I will post here when go to pc ?

[AlexWebsites]

Just following up, is this possible for 2 columns? Thanks.

[Joey_M]

@BomAle

Would you possibly be able to tell me how to make a 3 widget placement for IP.Pages (page template). I'm trying to figure out how to have three columns.

[BomAle]

If you would manage it with css and not with html/javascript try to put this into custom.css or include created css file into page settings and set single column into page settings

@media screen and (min-width: 980px) {
	/* c = $c = 3, 3 column */
	#elCmsPageWrap [data-widgetArea='col1'] > ul > li{
		float: left;
		display: inline-block !important;
		padding: 0 !important;
		margin: 0 1% 2% !important; /* m = 1 */
		width: 32%; /*(100-(c*2-2)*m)/c => (100-(3*2-2)*1)/3 = 32 */
		vertical-align: top;
		height: 400px;
		overflow-y: auto !important;
		overflow-x: hidden !important;
	}
	/* http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ */
	#elCmsPageWrap [data-widgetArea='col1'] > ul > li:nth-of-type(3n+1):nth-last-child(1) {
		width:100%; margin-bottom: 0 !important; margin-right: 0 !important;
	}
	/* 3n+1 first li of each row, 2 second to the last */
	#elCmsPageWrap [data-widgetArea='col1'] > ul > li:nth-of-type(3n+1):nth-last-child(2),
	#elCmsPageWrap [data-widgetArea='col1'] > ul > li:nth-of-type(3n+1):nth-last-child(2) ~ li {
		width:49%; margin-bottom: 0 !important;
	}
	#elCmsPageWrap [data-widgetArea='col1'] > ul > li:nth-of-type(3n+2):nth-last-child(1) {
		margin-right:0 !important;
	}
	#elCmsPageWrap [data-widgetArea='col1'] > ul > li:nth-of-type(3n+1):nth-last-child(3),
	#elCmsPageWrap [data-widgetArea='col1'] > ul > li:nth-of-type(3n+1):nth-last-child(3) ~ li {
		margin-bottom: 0 !important;
	}
	/* LAST WIDGET {$c}n*/
	#elCmsPageWrap [data-widgetArea='col1'] > ul > li:nth-of-type(3n){
		float: none;
		clear: both;
		margin-right: 0 !important;
	}
	/* FIRST WIDGET {$c}n+1*/
	#elCmsPageWrap [data-widgetArea='col1'] > ul > li:nth-of-type(3n+1){
		margin-left: 0 !important;
	}
	#elCmsPageWrap [data-widgetArea='col1']::after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}
}

if you would fit height and not fix to 400px you must remove height: 400px; and add inside media query clause

	#elCmsPageWrap [data-widgetArea='col1'] > ul{
		display: flex;
		flex-wrap: wrap;
	}

Result with flex

 

Edited July 28, 2018 by BomAle

[steve00]

I must be missing something here as why not use the ips html code to create your columns in Pages (checkout my homepage) instead of adding more css

as said I must be missing something for the reasoning (apologies if the reasoning is simple and I have missed it)

Edited July 29, 2018 by steve00

[BomAle]

7 hours ago, steve00 said:

I must be missing something here as why not use the ips html code to create your columns in Pages (checkout my homepage) instead of adding more css

as said I must be missing something for the reasoning (apologies if the reasoning is simple and I have missed it)

this is applicable on footer and header firstly, I have simply adapt the code to the request.

[Lucas James]

On 8/18/2017 at 6:25 PM, AlexWebsites said:

Best way to make this 2 column?

Simply drag a custom block and drop it in the widget area, and then drag another block and drop it side-by-side to the first block; fullstop! Don't drag-and-drop the third.

To make the widget height auto; instead of using height: 400px; edit the code as following:

height: auto;

Cheers.