How to design responsive page for various media |
Post Reply | Page <123 |
Author | |
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6194 |
Post Options
Thanks(0)
|
Ok, I see the issue,
The media query editor does not write the min width code For example your criteria seems to be only screen and (max-width: 767px) plus min-width: 600px. But the editor provides only screen and (max-width: 767px) You will have to manualy edit the code to change it into only screen and (max-width: 767px) and (min-width:600px)
|
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6194 |
Post Options
Thanks(0)
|
To tell you the truth, I use to write the code directly in the editor, It's easier for me than relying on the graphical interface you just demonstrate that does not work 100%
|
|
TC2020
Groupie Joined: Mar 26 2020 Location: Canada Status: Offline Points: 61 |
Post Options
Thanks(0)
|
After trial and error over the last couple days, I got this page responsive to all my screen resolutions as listed in previous post and elements lined up in my dashboard. I think the key concept goes back to the use of % for dimensions (as emphasized in many videos). It is also important to avoid using Min width based on pixels as it makes things harder to work with especially when the page is designed in columns (say, two with 20% and 80%). If this min px is smaller than the px size derived from the assigned % width, then the % value dictates the width (on large screens). When min px becomes dominant (on smaller screens), then the assigned % numbers (for multiple column widths) are of no use and can mislead you because the real % on certain screen size is then the ratio of min px and screen width resolution. At this point things start to shift around and you may wonder why they do not align as you expect (e.g. 20%-80%). I used this min width in px and it was one of the reasons that I had many difficulties in understanding responsive design in OE. This is not because of OE but it's on how things work. It tends to be overlooked during design. Having said that, OE is not always WYSIWYG and is misleading. Its editor window does not reflect your media size even though it displays the pixel size. Also, the editor does not tend to auto update on every change, so a page refresh is needed to really see the effect. If not, it can be very misleading. I use Chrome developer Options (F12) to check overall display on specific display size and also online tool (such as whats-my-browser-size) to check actual width. I checked my page on some actual devices and they look very close to what being shown by these two tools. I posed a question earlier on what OE Default media refers to (as some reference to proportionally lay out the structure for my dashboard). I thought it referred to my monitor resolution (3840x2160) but I think it's the browser resolution. So I have been designing my page with 2048x1017 instead. I still have many things to figure out with OE but overall, I think OE is a very good tool for someone like me to do responsive web page. It would be great to have tutorials to illustrate various responsive design concepts with respect to media resolutions, px, %, etc..and how-to's dealing with OE element property settings to help users reduce trial and error, if possible. Thanks to Hobby001 for all your help. |
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6194 |
Post Options
Thanks(0)
|
As I could see in your project, you have very specific requirements.
Only few individuals needs to work with such a resolution (3840x2160) I don't thik that you can find something free for that. |
|
digizar
Senior Member Joined: Dec 30 2015 Location: Germany Frankfu Status: Offline Points: 738 |
Post Options
Thanks(0)
|
Yes, and it would cause a tremendeous amount of data accross the internet.
Which sucks a contingent away with the first image. Despite a possblle very long download time. The customer would definitively not be much excited.
Edited by digizar - Aug 07 2021 at 1:07pm |
|
___________________________________
Ask questions only if there is no answer yet. https://blumendigi.com |
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6194 |
Post Options
Thanks(0)
|
In fact their requirement is for private internal network app
|
|
TC2020
Groupie Joined: Mar 26 2020 Location: Canada Status: Offline Points: 61 |
Post Options
Thanks(0)
|
It seems there is some misunderstanding on the reference to 3840x2160 resolution. And no, it was not my goal to design a Web page to this resolution (but only to popular screen resolutions based on 2020/21 statistics out there). This resolution was brought up as a way to figure out what OE 'Default media' actually refers to since we always work with Default media. As mentioned earlier, I think it's good to know what it is so you can plan your page to have a 'good' proportion (maybe, width/height=1.618) as a start. My page is a dashboard with some logical groupings and I want to keep them as close to what I design on the Default media as possible for all resolutions. Dashboard provides an effective (and popular) means for data visualization with tables, graphs, images, etc... It requires certain level of precision in laying out the Web page and it can be done with OE. OE is a good tool. It is just short on documentation, so a lot of guessing and figuring out to use it (at least for me anyway)... and still many things to learn as I go along with OE. |
|
Post Reply | Page <123 |
Tweet
|
Forum Jump | Forum Permissions You cannot post new topics in this forum You cannot reply to topics in this forum You cannot delete your posts in this forum You cannot edit your posts in this forum You cannot create polls in this forum You cannot vote in polls in this forum |