Jump to content

Easy Header Widget 3 Column Responsive


BomAle
 Share

Recommended Posts

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

res2.thumb.png.44c1931209881c9ef64140262ccb4873.png

Source : InvisionITA

Edited by BomAle
Link to comment
Share on other sites

  • 4 weeks later...
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 ?

Link to comment
Share on other sites

  • 3 weeks later...
  • 10 months later...

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

image.thumb.png.9f2278fafd49b39b07b10f798f4d24e8.png

 

Edited by BomAle
Link to comment
Share on other sites

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 by steve00
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 years later...
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.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...