Responsive column settings for tablet portrait and landscape
wilthil opened this issue · 32 comments
I am missing more control over the responsive layout for columns. Why is there no settings for tablets?
Are there any hooks/filters we can use to set new breakpoints?
Also, is there a way to filter the default section width of 1140px, and also the default columns gap?
Hi,
This are stuff we are working on and your comments will be considered.
Thanks
Hey guys, do you estimate when these responsive adjusts will be launched?
We getting a lot of feedback from the community and we do our best to include this comments in each release.
For now I don't have any estimate.
Great, thanks :-)
Hi guys,
Is there any update on this feature?
Nice to hear, that you are working on it. Keep up the great work!
I would love this feature as it's one of only a few of my bug-bears with Elementor. I have to apply CSS to work with some content in tablet mode, as more often than not the content is squashed.
It's also quite important for a few folks in the Facebook Elementor Community:
- https://www.facebook.com/groups/Elementors/permalink/1105079496284502/
- https://www.facebook.com/groups/Elementors/permalink/1077369832388802/?match=dGFibGV0LHdpZHRo
- https://www.facebook.com/groups/Elementors/permalink/1094334994025619/?match=dGFibGV0cyx3aWR0aA%3D%3D
- https://www.facebook.com/groups/Elementors/permalink/1130724873719964/
I would like to have the option to have columns collapse and stack to 100% width in tablet mode, just as they do in mobile mode. Like Joel said, columns in tablet mode are usually squashed too much vertically.
The tablet view (or lack of) is my number one feature wish for Elementor. I really want to start using Elementor for client work, but I can't until this is sorted. Hope to see it in the next release. Thanks!
I hope this option as a priority too, before all other things ....
Add this code to “$responsive_points” in “includes/elements/column.php” seems to do 90% of the job (then just need very little css change):
'screen_md' => [ 'title' => __( 'Tablet Width', 'elementor' ), 'class_prefix' => 'elementor-md-', 'classes' => '', 'description' => '', ],
Tablet view is a complete mess and there's very little a designer can do about it from the front end. In other words elementor as such is not suitable for commercial work. Please get this sorted.
I would love this as well. I don't really understand why there is great responsive control for so many other attributes, but column widths are limited to mobile and desktop. Please add tablet breakpoint for columns!
As @Nicoduweb pointed out, this is really easy to implement. In addition to what he added to includes/elements/column.php, you can add this to your CSS:
@media (max-width: 1024px) {
.elementor-row {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
Not sure if this will cause anything else to break, but it seems to be working fine for me so far. Shame that we have to edit core files for this though. 👎
Agree with CobraClutch.
And it's really more easy to use full width container with this features too.
Because 100% width on talbet is not always readable as on wide screen
I'd like to add my vote here as well. Additionally when setting container "content" width for sections it would be nice to set max-width value based on desktop, tablet and mobile rather than only desktop and then have to rely on padding/margin.
We really need responsive widths of collumns for our site.
For example we want the split to be 33% - 66% on desktops and 50% - 50% on tablets, for the same section.
+1
+1
+1 ofcourse !
Elementor Devs : What is the problem with integrating this feature please ?
+1
I am using @Nicoduweb and @CobraClutch solution for this but definitely +1 on making this part of core. Beaver Builder has this out-of-the box and it makes things much easier.
+1 Very Important.
or at least let us tweak this by hook please.
I have a decent solution where you add a select dropdown and choose the stacking breakpoint from choices you create:
https://gist.github.com/carasmo/58fb8e5ea796ec56e8cb87f1f4fc2e38
For 33.33% and 50% at another viewport width, this is where the Custom CSS field comes in:
@media (max-width: 900px) {
selector .elementor-col-33 {
width: 50%;
}
}
@media (max-width: 500px) {
selector .elementor-col-33 {
width: 100%;
}
}
@carasmo thanks! But unfortunately I don't have Elementor Pro.
I guess this will not work, If I paste this code into my themes custom CSS?
Once again I wish that the developers add a native option one time.
You would add a custom class to the section in the advanced tab and use the class as the selector. Make sure the priority of your css is after all of elementor's css by using the elementor/frontend/after_enqueue_styles hook
However, if you are a user of Elementor, buy a Pro license. Keep them in business.
.my-custom-section-class .elementor-col-33 { ...
Hello @ll,
I've done a plugin that seems to do the job transparently :)
Thank you @carasmo for your help your code inspired me.
You can find my plugin here :
https://fr.wordpress.org/plugins/mrt4e/
It can be improved ;)
ps : It seems no need to add custom css now.
EDIT : CSS IS REQUIRED
I'll push this plugin on wordpress asap
+1 for this feature.
As far as implementation, that was one of the few things Visual Composer did well. Their responsive column settings were set up so at each different break point you could either set a custom width, or adopt the same width as the breakpoint below. So mobile could be 100%, the next break point could be 50%. the next breakpoint up could be custom or adopt from the one before (50%), and on up the line. I felt like that was a simple and intuitive enough approach.
Any way you choose to go, this will be a very welcome feature :)
Hello all,
you can try my plugin here : https://fr.wordpress.org/plugins/mrt4e/#description
Have fun
@Nicoduweb please note that we're added a new responsive control for Column Width in the next version 1.5
You can learn more here: #1827 (comment)
Thank you all for your valuable feedback!
So on tablet responsive mode, a form looks horizontal and not sure why it wont stack?