How to design responsive page for various media |
Post Reply | Page <123> |
Author | ||||
TC2020
Groupie Joined: Mar 26 2020 Location: Canada Status: Offline Points: 61 |
Post Options
Thanks(0)
|
|||
I guess there is no direct image paste to post here, but through link. Let me try this (as in your way). |
||||
TC2020
Groupie Joined: Mar 26 2020 Location: Canada Status: Offline Points: 61 |
Post Options
Thanks(0)
|
|||
...extra http:// removed from previous post. Let's try these: |
||||
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6194 |
Post Options
Thanks(0)
|
|||
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6194 |
Post Options
Thanks(0)
|
|||
TC2020
Groupie Joined: Mar 26 2020 Location: Canada Status: Offline Points: 61 |
Post Options
Thanks(0)
|
|||
My page does not have that viewport meta but that declaration may not be helpful because users may need to zoom, especially on phones. This is not a Website on the internet so I need to prepare the pages and provide you the link via your website contact form. There, maybe you will see the issues I am facing.
|
||||
TC2020
Groupie Joined: Mar 26 2020 Location: Canada Status: Offline Points: 61 |
Post Options
Thanks(0)
|
|||
My questions so far have to do with my lack of understanding of the 'concept' of how responsive design is implemented in OE, so my question is: Is the responsive design concept in OE based on: 1). WYSIWYG? 2). Element hide/visible setting?. 3). Both of the above, maybe with exceptions For 1), I do not think it is true because change in one media ripples throughout. This may be because I do not do things in the right way? (and I hope this is the case). For 2), I have not tried yet but from the tutorial videos, it looks like you either show or hide elements on specific screen size so they look proper. Effectively you would have multiple copies of the same element on a page and selectively show or hide it depending on the screen size. For 3), maybe 1) is true except certain properties that inherit from parent pages I hope the above makes some sense and relatable. Knowing the concept helps avoid senseless trials and errors. Thanks. |
||||
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6194 |
Post Options
Thanks(0)
|
|||
They stopped trying to make it 100% WYSIWYG when the number of screen size and resolution grew too fast. You rely on previsualisation on browswers to control what you have done <F12> in Chrome offers some possibilities
Never needed to double an elemement, simply used media edition properly to reconfigure the element. Hiding and display elements is required sometime for other reasons. In the responsive menu tutorial it is hidden on smaller devices and replaced by the "hamburger" button used to call (display the menu) The menu items are then reconfigured for finger accessibility on these smaller devices.
By parent pages, y ou meant layers I guess
If you could zip a copy of your project with some pages not necessarily the whole project I would be in a better position to understand what you have done. Just send me the link trough WEtransfer.com they can generate a lnink that you can send me trough my contant page: https://denislafrance.net/index.en.htm#Contact
Edited by Hobby001 - Jul 30 2021 at 5:00am |
||||
TC2020
Groupie Joined: Mar 26 2020 Location: Canada Status: Offline Points: 61 |
Post Options
Thanks(0)
|
|||
WEtransfer.com asks for recipient's email address and I do not know yours. I already sent the link through your contact form. Please check. As mentioned, this is not an internet website but for a device. To access it, I would need your IP address to open its firewall for you. Also mentioned, you can send me your IP via my email in your contact form or via pigeons... |
||||
TC2020
Groupie Joined: Mar 26 2020 Location: Canada Status: Offline Points: 61 |
Post Options
Thanks(0)
|
|||
I do use Chrome to check my page. I set it to include all my screen resolutions above. In case someone wants to know... This is done by clicking the 3 vertical dot button at top right hand corner of Chrome. It opens up a menu. Click on More tools ->Developer tools. This opens up a window which you see 'Responsive' at the top. Click on that and drop down to 'edit...'. In that new panel, I entered all my resolutions and their labels with prefix such as Ax, Bx, Cx (x=[0..N]) for desktops, tablets, phones. This way, the drop down list will list the resolutions from large to small in proper order (so it's faster to check your page in going down the list). With all required resolutions pre-defined, it's quicker to check the page. Otherwise, it's very tiresome from the process. |
||||
TC2020
Groupie Joined: Mar 26 2020 Location: Canada Status: Offline Points: 61 |
Post Options
Thanks(0)
|
|||
I already sent you the WEtransfer link to the source file. Please check.
|
||||
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 |