In your CSS example, if we change the media query condition from max-width to min-width, then we get mobile-first. I wish Elementor would add the option to design for mobile first. However, you are so right that what clients want to see first is the desktop version. Thanks!
Yep, mobile first would go that way...and the best argument for it is that you'd avoid redundant code where you're 'returning' to defaults in mobile media queries. Perhaps Elementor will one day find a way to do it (and truly innovate as a website builder), but it would go against the intuition of a lot of desktop designers and create too much of a learning curve. Let's face it, if redundant code is one's biggest consideration....a page builder shouldn't be used. 😁
What I would like to know is what are the exact sizes for those breakpoints.I'll try to explain myself. I usually first design in Adobe XD or Figma and then build in Elementor. I would like to set up screens in Adobe XD that match the real device size named in the Elementor screen sizes. For example if you choose Horizontal Tablet in Elementor breakpoints it still shows you a square screen to design and i do understan the objective of that is to let you design knowing what comes under the real size, but I would like to know how much of that I'm actually gonna see in a real tablet in Horizontal mode with a breakpoint of 1200. So how many pixles is that height? 670px? 680px? 690px??? In Tablet Horizontal breakpoing it also shows you a square which doesn't make any sense. It should show you something similar to mobile. So what I want to do is to create proper sizes of what we can see depending on the device to make better decision, all in Adobe XD of Figma. I know that Desktop is 1920px x 1080px, but I don't know the rest. I know it varies but at least we should get an estimate. Those screens would be Laptop, Horizontal Tablet, Vertical Tablet, Horizontal Mobile, Vertical Mobile, etc. Do you have any idea of how to achieve this?
Hi Sergio, apologies for not replying sooner. The breakpoints are visible in Elementor, in Site Settings. I've just set the 'Mobile Responsive' lesson in my Udemy course to 'FREE PREVIEW'. Feel free to give it a watch and perhaps it will help! You can also set EXTRA devices, rather than the three standard layouts. Do let me know if that helps! www.udemy.com/course/become-a-no-coding-web-designer/?referralCode=7BC8AF5B3801E273FF0C
@@iamchrisgood Hi! I know what you mean, I know I can see the breakpoints in setting, but those are only the horizontal numbers, we should laso get the vertical numbers of that said breakpoint to design in softwares like figma or adobe xd. I managed to create a file after measuring every single possibility tocreate devices screens in Adobe Xd that reflects exactly what I'm looking at in the Elementor editor, but with the missing vertical measurements. Hope I made myself understood better this time hahaha. Thank you!
Ah, I think I see what you mean there. I suppose I regard the responsive design views as only approximate anyway (horizontally) and it is shaped more by consistent margin and padding values...which extends to vertical scroll. I imagine I don't notice it so much as I don't do too much initial design in graphics.
In your CSS example, if we change the media query condition from max-width to min-width, then we get mobile-first. I wish Elementor would add the option to design for mobile first. However, you are so right that what clients want to see first is the desktop version. Thanks!
Yep, mobile first would go that way...and the best argument for it is that you'd avoid redundant code where you're 'returning' to defaults in mobile media queries. Perhaps Elementor will one day find a way to do it (and truly innovate as a website builder), but it would go against the intuition of a lot of desktop designers and create too much of a learning curve. Let's face it, if redundant code is one's biggest consideration....a page builder shouldn't be used. 😁
What I would like to know is what are the exact sizes for those breakpoints.I'll try to explain myself. I usually first design in Adobe XD or Figma and then build in Elementor. I would like to set up screens in Adobe XD that match the real device size named in the Elementor screen sizes. For example if you choose Horizontal Tablet in Elementor breakpoints it still shows you a square screen to design and i do understan the objective of that is to let you design knowing what comes under the real size, but I would like to know how much of that I'm actually gonna see in a real tablet in Horizontal mode with a breakpoint of 1200. So how many pixles is that height? 670px? 680px? 690px??? In Tablet Horizontal breakpoing it also shows you a square which doesn't make any sense. It should show you something similar to mobile. So what I want to do is to create proper sizes of what we can see depending on the device to make better decision, all in Adobe XD of Figma. I know that Desktop is 1920px x 1080px, but I don't know the rest. I know it varies but at least we should get an estimate. Those screens would be Laptop, Horizontal Tablet, Vertical Tablet, Horizontal Mobile, Vertical Mobile, etc. Do you have any idea of how to achieve this?
Hi Sergio, apologies for not replying sooner.
The breakpoints are visible in Elementor, in Site Settings.
I've just set the 'Mobile Responsive' lesson in my Udemy course to 'FREE PREVIEW'. Feel free to give it a watch and perhaps it will help! You can also set EXTRA devices, rather than the three standard layouts.
Do let me know if that helps!
www.udemy.com/course/become-a-no-coding-web-designer/?referralCode=7BC8AF5B3801E273FF0C
@@iamchrisgood Hi! I know what you mean, I know I can see the breakpoints in setting, but those are only the horizontal numbers, we should laso get the vertical numbers of that said breakpoint to design in softwares like figma or adobe xd. I managed to create a file after measuring every single possibility tocreate devices screens in Adobe Xd that reflects exactly what I'm looking at in the Elementor editor, but with the missing vertical measurements. Hope I made myself understood better this time hahaha. Thank you!
Ah, I think I see what you mean there. I suppose I regard the responsive design views as only approximate anyway (horizontally) and it is shaped more by consistent margin and padding values...which extends to vertical scroll. I imagine I don't notice it so much as I don't do too much initial design in graphics.