BullGuard Antivirus Sale - 60% Off with openElement !
Forum openElement Homepage
Forum Home Forum Home >

openElement

> openElement General Discussion
  New Posts New Posts RSS Feed - Customizing page for responsive format changes
  FAQ FAQ  Forum Search   Register Register  Login Login

Customizing page for responsive format changes

 Post Reply Post Reply Page  12>
Author
Message
Hjiorst View Drop Down
Groupie
Groupie
Avatar

Joined: 22 Juil 2019
Location: California
Status: Offline
Points: 44
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hjiorst Quote  Post ReplyReply Direct Link To This Post Topic: Customizing page for responsive format changes
    Posted: 19 Oct 2019 at 02:03
I have come a long way with my website and am in the final stages.  But every time I think I have the process of making adjustments for the different media format layouts, I suddenly find myself back at square one.

My experience is that with OE, when customizing the layout and such for smartphones or tablets,  What You See Is Definitely Not What You Get.  It seems to do well enough with the Default page format, but switching to smartphone gives you something other than what shows up on my phone or on the simulated smartphone on the Firefox browser.

This is what I see on the OE window when in "Smartphone" mode:



What I see on my own cell phone (viewed on Chrome) is very different.

Thirdly, neither are what I see on the simulated GalaxyS9 view on Firefox.  (ctl-shft-M)

What matters, of course, is what a cell phone is actually displaying.  What I got now is not far off from what I want, but it is stubbornly refusing to do what I want.  The main problem I'm having is with my main page's header, which is part of a design layer.

I cannot change the logo image size.  Is shrinks a little for the smart phone, but only to some unknown parameter.  The number I enter into the width table seems to have no effect.  300px, 100px, the image stays the same.  The page links (Main, etc.) reposition themselves into two rows, which is fine, but I can't make them any different size on the phone or the  browser sim. 

Both of these do get smaller in the OE window, it is just not reflected in the browser or the phone.

I also can't seem to get the skitter image to shrink enough to fit within the screen, though that is part of the main page, not the design layer. 

Can anyone tell me what I'm doing wrong here?



Edited by Hjiorst - 19 Oct 2019 at 02:06
-Hjiorst
Back to Top
digizar View Drop Down
Senior Member
Senior Member
Avatar

Joined: 30 Dec 2015
Location: Germany
Status: Offline
Points: 456
Post Options Post Options   Thanks (0) Thanks(0)   Quote digizar Quote  Post ReplyReply Direct Link To This Post Posted: 20 Oct 2019 at 00:20
Off topic.
The images you show, seem to be very huge in size, and they tumble in very slowly, unacceptable.
Recommend: make these images smaller in size.


Edited by digizar - 21 Oct 2019 at 02:23
___________________________________
Ask questions only if there is no answer yet.
https://digispics.com/_pers/resger2017.pdf
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 4344
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 21 Oct 2019 at 00:57
Here is what I get on my cell


What template have you used?
Anyone who wants to put something on line gets hooked by something big
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 4344
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 21 Oct 2019 at 15:24
Assuming that you selected the Essential template

The logo size reacts to media if you do it properly.

You just have to select the media that you want to modify.  Then change the width and height as per your requirements.

You have to understant that these Media are built from standard CSSS media queries.

The media named phone - THEME ESSENTIAL  willl affect the selected components when the screen will be 640 px whide or less  (screen and (max-width: 640px))

Other than the default media you have five of these medias available for you customisation.
Anyone who wants to put something on line gets hooked by something big
Back to Top
Hjiorst View Drop Down
Groupie
Groupie
Avatar

Joined: 22 Juil 2019
Location: California
Status: Offline
Points: 44
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hjiorst Quote  Post ReplyReply Direct Link To This Post Posted: 21 Oct 2019 at 19:48
I am using the Essential template.  And I believe I know how to make adjustments per each media format, because I am able to do so on many text blocks and images.  But the same methods do not work on every element.

But hang on a second:  I have been using "Smartphones [portrait]" when I make my adjustments.  Are you saying that I should use the "phone - THEME ESSENTIAL" when doing this?  Does that make a difference?

If so, why can I set different sizes for some things using the other media selection?
-Hjiorst
Back to Top
Hjiorst View Drop Down
Groupie
Groupie
Avatar

Joined: 22 Juil 2019
Location: California
Status: Offline
Points: 44
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hjiorst Quote  Post ReplyReply Direct Link To This Post Posted: 21 Oct 2019 at 19:50
Also:  Why does  "phone - THEME ESSENTIAL" not change the window frame to a cell phone shape?
-Hjiorst
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 4344
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 21 Oct 2019 at 20:15
Originally posted by Hjiorst Hjiorst wrote:

Also:  Why does  "phone - THEME ESSENTIAL" not change the window frame to a cell phone shape?

They have been partly configured

Select default media

Select Modify media


Then in the new pannel, add 640 to maximum  under phone - THEME ESSENTIAL


Do the same for Talette but with 960px
Anyone who wants to put something on line gets hooked by something big
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 4344
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 21 Oct 2019 at 20:20
The way these things works is dictated by CSS media queries.

The standard selections cover the following width:

1199 to 768 px
 767  to 481 px
 480 px and less 

The two specific are covering:

960 px and below
640 px and less

Anyone who wants to put something on line gets hooked by something big
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 4344
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 21 Oct 2019 at 20:25
The home page slider is dimentionned 100% width of it's parent element and a maximum of 960px.

And yes depending on different factors some elements are not responsive.


Anyone who wants to put something on line gets hooked by something big
Back to Top
Hjiorst View Drop Down
Groupie
Groupie
Avatar

Joined: 22 Juil 2019
Location: California
Status: Offline
Points: 44
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hjiorst Quote  Post ReplyReply Direct Link To This Post Posted: 22 Oct 2019 at 22:30
This should be helpful when I am able to get back to working on this.  But other demands intervene.  I'll check back in when I can return to this project.  Thank you for your help!
-Hjiorst
Back to Top
 Post Reply Post Reply Page  12>
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 10.11
Copyright ©2001-2012 Web Wiz Ltd.

This page was generated in 0,031 seconds.