Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mobile layout - hide columns #2965

Closed
Tim2468 opened this issue Dec 15, 2017 · 38 comments

Comments

Projects
None yet
@Tim2468
Copy link

commented Dec 15, 2017

It should be possible to deactivate individual columns for mobile devices.
At the moment it is only possible to deactivate whole sections.

@bainternet

This comment has been minimized.

Copy link
Collaborator

commented Dec 17, 2017

@Tim2468

Can you not simply hide the widgets in that column for mobile?

@Tim2468

This comment has been minimized.

Copy link
Author

commented Dec 17, 2017

Yes, it works, but what if I have many widgets in a column, e. g. 20 or more.
In this case I have to hide everything in the column manually.
Also I have to reduce the default padding of a column to zero, because the empty column still exists in mobil view.
It's not really an important feature, but I think it can save some time.

@bainternet

This comment has been minimized.

Copy link
Collaborator

commented Feb 26, 2018

@Tim2468

Currently, this feature is not supported, but we will look into it in the future if we see a large demand for it.

Thanks for the feedback.

@bainternet bainternet closed this Feb 26, 2018

@randzgonz02

This comment has been minimized.

Copy link

commented Apr 19, 2018

We also need this exact feature that @Tim2468 mentioned.

@ShadowXVII

This comment has been minimized.

Copy link

commented Apr 26, 2018

I tried setting Column Width to 0% but it won't hide :(

@black-eye

This comment has been minimized.

Copy link

commented Apr 26, 2018

+1

@sambob220

This comment has been minimized.

Copy link

commented May 5, 2018

I would also benefit from this feature. Makes it a ton easier to optimize block and other layouts across devices.

@dinhtungdu

This comment has been minimized.

Copy link

commented May 8, 2018

I need this feature too. Another issue when hide widget is that the column is still visible => the padding of column still affect distance between rows.

@KimchaC

This comment has been minimized.

Copy link

commented May 25, 2018

I agree, this is a MUST. It makes working with Elementor MUCH harder.

@ljgarnes

This comment has been minimized.

Copy link

commented Jun 8, 2018

I need this option as well.

@gahilo

This comment has been minimized.

Copy link

commented Jun 15, 2018

I need this option as well

@juanfran-granados

This comment has been minimized.

Copy link

commented Jul 4, 2018

+1

@bellamystudio

This comment has been minimized.

Copy link

commented Jul 6, 2018

Yep, this is still necessary! +1

@reddykvishal

This comment has been minimized.

Copy link

commented Jul 16, 2018

+1 Yes, this is definitely important. It would be immensely useful to hide a column on devices.

@coreaspect

This comment has been minimized.

Copy link

commented Jul 16, 2018

looks like a workaround using CSS, pretty easy - https://www.youtube.com/watch?v=CGQnKgjbdDI

@clickharder

This comment has been minimized.

Copy link

commented Jul 19, 2018

I added this code to a plugin (my guess is it would also work in the functions.php file).

if ( !function_exists( 'ch_hide_column_elementor_controls' ) ) {
	add_action( 'elementor/element/before_section_end' , 'ch_hide_column_elementor_controls', 10, 3 );
	function ch_hide_column_elementor_controls( $section, $section_id, $args ) {
		if( $section_id == 'section_advanced' ) :

			$section->add_control(
				'hide_desktop_column',
				[
					'label' => __( 'Hide On Desktop', 'elementor' ),
					'type' => Elementor\Controls_Manager::SWITCHER,
					'default' => '',
					'prefix_class' => 'elementor-',
					'label_on' => __( 'Hide', 'elementor' ),
					'label_off' => __( 'Show', 'elementor' ),
					'return_value' => 'hidden-desktop',
				]
			);

			$section->add_control(
				'hide_tablet_column',
				[
					'label' => __( 'Hide On Tablet', 'elementor' ),
					'type' => Elementor\Controls_Manager::SWITCHER,
					'default' => '',
					'prefix_class' => 'elementor-',
					'label_on' => __( 'Hide', 'elementor' ),
					'label_off' => __( 'Show', 'elementor' ),
					'return_value' => 'hidden-tablet',
				]
			);

			$section->add_control(
				'hide_mobile_column',
				[
					'label' => __( 'Hide On Mobile', 'elementor' ),
					'type' => Elementor\Controls_Manager::SWITCHER,
					'default' => '',
					'prefix_class' => 'elementor-',
					'label_on' => __( 'Hide', 'elementor' ),
					'label_off' => __( 'Show', 'elementor' ),
					'return_value' => 'hidden-phone',
				]
			);
		endif;
	}
}

This created the toggles within the advanced tab for hiding columns. I have been using it for months. I used to have it in the Responsive section but that was removed in a recent update so I just moved them over to the Advanced section. Not sure why this couldn't be incorporated in Elementor.

Personally, I like to use background images on my columns. Even if you hide all of the widgets within the column you still can see a sliver of the background image, so hiding the entire column became important. This code solved my problem.

@yaniv691

This comment has been minimized.

Copy link

commented Aug 13, 2018

+1 This is very important and useful. Please add this feature.

@monaye

This comment has been minimized.

Copy link

commented Aug 19, 2018

+1 I think this is a very important feature.

@Ricarditu

This comment has been minimized.

Copy link

commented Aug 21, 2018

Thank @clickharder for this code! Works like a charm!

If it's so simple to create the controls, why not add it to the source code?

@black-eye

This comment has been minimized.

Copy link

commented Aug 22, 2018

@bainternet Please consider reopening this issue.
15+ supporters since closing this issue - that's large enough demand to reconsider, isn't it?

@pixelsock

This comment has been minimized.

Copy link

commented Aug 22, 2018

+1, please. This doesn't make any sense why this isn't an option already.

@bainternet bainternet reopened this Aug 22, 2018

@KimchaC

This comment has been minimized.

Copy link

commented Aug 22, 2018

Hurray, it's reopened. Let's hope this gets implemented soon :)

@pixelsock

This comment has been minimized.

Copy link

commented Aug 24, 2018

@clickharder This is a perfect solution in the meantime. Thanks for this!

@kubik101

This comment has been minimized.

Copy link

commented Sep 11, 2018

+100
I am using Elementor Pro for the first time and looked for the ability to hide columns responsively almost immediately.

@SetayWeb

This comment has been minimized.

Copy link

commented Sep 30, 2018

+1 This is vital!

@chrolm

This comment has been minimized.

Copy link

commented Oct 7, 2018

+1 for this feature.

@clickharder Awesome! Thank you.

@marka33

This comment has been minimized.

Copy link

commented Oct 21, 2018

+++++ This feature is needed ASAP!!!!!!!!!

@MPHood

This comment has been minimized.

Copy link

commented Nov 24, 2018

Still needed

@HaileyKay28

This comment has been minimized.

Copy link

commented Dec 8, 2018

Needed 👍

@Turanligil

This comment has been minimized.

Copy link

commented Dec 14, 2018

+1 ... One year left for such a small feature with so many votes :(

@hufer

This comment has been minimized.

Copy link

commented Dec 24, 2018

https://pafe.piotnet.com/#responsive-hide-column Piotnet Addons For Elementor Responsive Hide Column can do it for you

@wayheming

This comment has been minimized.

Copy link
Contributor

commented Jan 22, 2019

+1 Yes, this is definitely important. It would be immensely useful to hide a column on devices.

@clickharder

This comment has been minimized.

Copy link

commented Jan 22, 2019

I purchased Piotnet Addons for Elementor and it works exactly as I would have imagined. The code I provided works as a free option, and it would be best if Elementor included this feature, but that plugin definitely fills the gap in the meantime.

But seriously, it makes no sense that this features hasn't been added it. It almost feels like we are being ignored on purpose... ;)

@wayheming

This comment has been minimized.

Copy link
Contributor

commented Jan 23, 2019

@clickharder I sent a pull request #6837 with the addition of these options, wait and see if it can accept.

@reizen703

This comment has been minimized.

Copy link

commented Jan 28, 2019

Please add feature

@JoeRossPR

This comment has been minimized.

Copy link

commented Feb 8, 2019

@bainternet +1 Needed! @clickharder where exactly do I need to put that code?

@davidmonteromirai

This comment has been minimized.

Copy link

commented Feb 20, 2019

+1

@arielk arielk added this to the 2.5.0 milestone Feb 24, 2019

@arielk

This comment has been minimized.

Copy link
Contributor

commented Feb 24, 2019

Closed by #6898

@arielk arielk closed this Feb 24, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.