HomeНаука и техникаRelated VideosMore From: Flint Skin

Elementor - Responsive Hidden Columns

101 ratings | 4425 views
Using Elementor CSS to hide columns by device type. The three hidden classes: elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-phone The CSS: .db-column-flex-grow .elementor-column { flex: 1 1 auto; }
Html code for embedding videos on your blog
Text Comments (29)
Peter Williams (11 days ago)
You are my hero!
Brendan Nagle (25 days ago)
Why not just delete the desktop column from the second section if for that section being tablet / mobile only and you don't want it there, why bother hiding when you could just delete it to the same effect?
Flint Skin (16 days ago)
It reduces the weight of the page. Hidden sections are still loaded by the browser. Adding separate sections for each device type is not a good practice.
I had to stop there to thank you.. Thank you dude
Roberto Misas (2 months ago)
THANKS a lot. Great help
SonyH25 (2 months ago)
Jackpot! Just what I needed. Thanks.
Profesor MARK (2 months ago)
Hi. Where do you have to declare your custom CSS classes ?? Thanks in advance.
Ambroze kweronda (4 months ago)
Ive added elementor-hidden-phone to hide a column on mobile but it's still showing do I have to add .db-column-flex-grow .elementor-column { flex: 1 1 auto; }
Ambroze kweronda (4 months ago)
Thanks, it worked.
Ambroze kweronda (4 months ago)
Let me try that now. Thanks
Flint Skin (4 months ago)
no just add elementor-hidden-phone to the Columns CSS Classes field.
awesome. - thanks ... you may want to check Github and post a link - I have on a couple.
Max Maxed (5 months ago)
Frankly it doesn't do shit at all. Probably old deprecated solution. These "classes" don't do anything.
Works fine - the latest version of Elementor - plus Pro. What I found is you need to sometime save the Elementor page you are editing then refresh the browser, then when you preview you see the changes come through.
Jon Vongoh (5 months ago)
These tricks are brilliant, hugely useful thanks! Elementor needs more responsive options....they say they're working on it.... these are starting to fill in the gaps....
sisteron sisteron (6 months ago)
THANKS For this great video
Michael Palombo (7 months ago)
Is it possible, to "close the Elementor Toggle Widget in mobile mode by CSS" to reduce space?
Michael Palombo (7 months ago)
Great and thank you for this tip!
Anton King (10 months ago)
Very helpful. Thanks
Claudio Reis (10 months ago)
Thank You Very Much :)
Mark Nasri (11 months ago)
thank you very much great video, god bless u. happy new year, full of health and happiness for many years to com
Peggi R (11 months ago)
Great hack - love ur work
Flint Skin (11 months ago)
Thanks Peggi! Happy New Year. Lots of good stuff to come!
Sheridan Barrett (11 months ago)
Nifty little trick. Thanks for sharing.
John Boyd (11 months ago)
Thanks for sharing. I'm curious if you have a recommended place for me to learn more about Flex? Looks like it could be very useful for so many different things.
John Boyd (11 months ago)
Thank You, Definitely an addition to my bookmarks.
Flint Skin (11 months ago)
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Ben Crossley (11 months ago)
Another excellent, clear and useful tutorial. Thank you so much. Happy New Year!!
Shae (11 months ago)
Very nice! Thanks for sharing David

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.