Widget area on smaller screens

[ukic]

Hi,

I´m using pro and have a question about hiding the widget area element on smaller screens. In this example I have hidden the the widget area column for the three smallest options. It works fine with the two smallest ones but on 768-979px screens it shows whitespace on the right. I would like the textcolumn to be full screen and get rid of that whitespace on those screen sizes.

I use two columns with text on the left and widget area on the right.

You can see example what I mean here: https://lainaanyt.fi/autolaina/ when you zoom it over 150% on the browser. Scroll down to the two column text and widget area and try zooming it and you see what I mean.

Is it possible to make the text full screen and how?

-Timo

[friech]

Hi Timo,

Thank you for writing in, I see that you applied the Hide During Breakpoints on the Widget Area element.

Please remove that and applied the Hide During Breakpoints on the 1/3 column itself, with that it’s not only the Widget Area will be hidden and leave the 1/3 column look like an empty, but the entire column will be hidden.

• 

Then add this to the 2/3 column’s Element CSS area, this will make the 2/3 column fullwidth but only on screen 979px and below.

@media (max-width: 979px) {
	$el.x-column.x-2-3 {
    	width: 100%;
	}
}

• 

Hope it helps,
Cheers!

[ukic]

Perfect, Thanks!

[christian]

You’re welcome. Glad we’re able to help.