align widgets side by side – mobile

[tussle]

Hi
On Genesis Sample theme.

In the right Primary sidebar I have 2 widgets: eNew Extended and Calendar.

When going mobile they appear one on top of the other at large screen size:
X
Y
(I know at small screen size they must be like one over the other.)

How could I get them to align side by side on a larger screen size:
X Y

I tried width 50% but that just makes them 50% of their row.
Tried Display: block - no effect.

Any idea or pointers?

Thanks

[Tom]

Heya,

This CSS should be placed in the child theme stylesheet, either woven in-place with the other media queries or at the very bottom of the file. Adjust the breakpoints as you wish.

@media only screen and (max-width: 960px) {

	.sidebar-primary .widget {
		clear: left;
		display: inline-block;
		float: left;
		width: 48%;
	}
	
	.sidebar-primary .widget:nth-child(2n) {
		clear: right;
		float: right;
	}

}

@media only screen and (max-width: 640px) {
	
		.sidebar-primary .widget {
			width: 100%;
	}

}

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[tussle]

Tom, thanks very much! Worked perfectly and looks great.

(last month referred a theme developer and a SP poster to genesisthemes.ca - really good resource. Thx)

[Tom]

Thanks @tussle! Glad that worked for your site.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Author]

Posts