Elementor Pro Tip: How To Control The Column Layout in Tablet View
HTML-код
- Опубликовано: 27 июн 2024
- UPDATE: this is now no longer necessary after Elementor 1.5. Updated video here: • How to Control Respons...
---
Grab the code here: www.designbuildweb.co/tablet-...
Generally speaking, Elementor’s responsive editing features are pretty good. But a lot of people get stuck trying to fully control the column layout in the tablet view. The editor doesn’t really give you any control right now.
So in the meantime, I’ll to show you how to control how many columns there are side-by-side in tablet view in Elementor.
RESOURCES USED:
Elementor Pro: www.designbuildweb.co/recomme... - affiliate link
UPDATE! This trick is no longer necessary. :) UPDATE VIDEO: ruclips.net/video/tgwNYsxO_GA/видео.html
Thanks again Dave! An elegant solution for a very annoying problem.
Thanks Maya.
Ha! Realised at 1:10 I say I've "made a 4 column layout", even though clearly it looks like 3! I didn't realise I had the screen zoomed in too much at that point. Doh! There actually were 4 columns - you just can't see the last one. :)
Best Helpful Tutorial
Now I've crossed that bridge before I came to it... right on. Cheers, Dave!
Always best to be prepared. :) Thanks!
love it :)
great video, thx
Thanks Mark. Just note that this tip is no longer necessary. Elementor now allows you to control the column layouts easily on tablet. It wasn't possible when I made this video.
yes i noticed it, but the point is in web design, knowing codes are always necessary, and there is no way to be able to make a decent website without css
I love you, i was look about this and I didnt find nothing. I litle speak english but I understand 80% did you say.
Gracias mi amigo!
Nice trick - thank you! 👍
I spend a lot of time on my tablet and usually run it in landscape mode. I find that most breakpoints seem to ignore landscape orientation,instead focusing on portrait mode.
Of course this is compounded by the huge array of screen sizes for both phones and tablets, and when you have to build a structure for all of them your media queries can often use more lines than the standard css!
Just last night I was building out a new landing page for a client. I had the page completed with Elementor inside 10 minutes - then because of a specific request for some very large text in the hero section, I probably spent a couple of hours or more constructing the damned media queries. DOH!
I've yet to find a nice small set of media queries that cover the most common situations so I always find myself experimenting on most jobs.
Do you have a preferred set?
Thanks again for the video - I really enjoy our stuff! 😊
Thanks Michael! Really pleased you liked it. Yes, fixing responsive issues can be an unexpected time sink that's for sure. And Elementor's 3 preset breakpoints definitely aren't comprehensive enough for a lot of projects. I do tend to try to stick with what those 3 allow me to do, as much as possible, purely for time (unless the client's budget allows for extra fiddling!). And then go deeper only if I really need to. Unfortunately I don't have a set of media queries, I just write them for each specific design.
Great
Hi Dave.
There is now a plugin in the repository to do this that will work on free version and pro, just installed and it works.
Adds Tablet Width Custom option in Column - Advanced - Responsive - Tablet width - Custom Width
wordpress.org/plugins/mrt4e/
NICE!
Hi Dave,
I don't have Elementor Pro yet (am saving up!) so in a four column section I added the css class "two" and then added your code to the theme css but it didn't work.
Have I done something wrong?
.two
@media (min-width:768px) and (max-width:950px) {
selector .elementor-row {
flex-wrap: wrap;
}
selector .elementor-column {
width: 50%;
}
}
Hi Denis - yes that won't work unfortunately. The 'selector' bit only applies when used as I showed in the video, it doesn't make sense outside of EL Pro.
One way round it - add an HTML widget to your page. Then paste this into it:
@media (min-width:768px) and (max-width:950px) {
.two .elementor-row {
flex-wrap: wrap;
}
.two .elementor-column {
width: 50%;
}
}
Does that work for you?
Design Build Web - For Non-Coder Graphic Designers
Thanks for the reply Dave.
I have since become a dab hand at duplicating sections and using the advanced responsive toggles to create two rows with two columns for tablet.
Necessity the mother of all invention!
Wonder will they ever fix it
Well, that's certainly one way of tackling it. :) I've done that myself before a few times too. Yes, let's hope it's fixed in the main build soon, seems like a rather obvious omission!
Is there a way to view the Tablet view horizontally?
No, sadly not. At least not yet.
OK, that's what I figured. Thanks