Dynamic page flow with course menu navigation

[pete1]

Hello designers,
I have a (hopefully easy) question regarding the viewing of canvas across different platforms (mobile, laptop and desktop). I have recently been shown the light with using divs instead of trying to create our page with tables. However I am in a pickle of making this look nice, I am currently happy-ish with desktop and mobile, however have come unstuck with laptop. All browsing has been completed in a chrome browser. I have attached some images to try to assist with my dilemma.

Img 1 View from desktop

Img 2 View from laptop with course menu

Img 3 View from laptop with course menu collapsed

Img 4 View from mobile (I could have waited for the flying panda to go, but come on.. its a flying panda)

Img 5 HTML editor of "the ageing process"

- As you can see I have tried to throw in three sizes for the flexbox grid (it does not seem to differentiate between large screen - 24' and laptop ~15')

For anyone that is very involved in programming and canvas, I apologise for what is no doubt hacked together "coding". I would greatly appreciate any tips and pointers for best practice in getting appropriate size across all three viewing platforms.

This also is an opener for one last point automatically adjusting iframes anyone?? i've tried the width100% etc etc but doesn't seem to work as canvas inserts a fixed height in.

Thanks to everyone who has spent the time to cast their eyes over this post! I look forward to a good discussion.

[garciah]

Hi Pete,

I'm not sure how much help I'll be, since I'm not a coder--I just know enough HTML to get by, but I'll try.

First, I was surprised to see that you can't add percentages to specify width because I know that we do that all the time, so I looked at the code for one of our pages, and I see that we're using "div style" and you're using "div class." I have absolutely no idea if that could be the difference, but I'll include an image of our code here for your reference. You'll notice that we use a combination of fixed width and percentages.

Here's a screen shot from my desktop in Firefox:

Here's a screen shot from my iPhone 6, using the Safari browser:

I'll mention too that we aren't using any custom CSS, so if you are, I imagine that could make a difference too. I'll also add the disclaimer that I didn't write this code; my colleague, who's much more experienced at coding, wrote it.

I hope this helps!

[pete1]

Hi Heather,
Thank you for your thorough response, I am an exercise physiologist by trade, so popping my head into this coding business is...interesting..

Firstly, hats off to your colleague, I really like the design of the page!
I had a bit of a browse through your HTML, and I think my main issue here is the use of <iframe>. When I inserted a picture <img src> it adjusted into the page perfectly (interestingly, this was without even adding any width % changes). Just a side note, we use the <iframe> as our images are from ThingLink.
I will have to have a bit of a play around to see if there is any flexibility in the iframe.You can select a width percentage in iframe for example, but if you try to leave height blank it puts a fixed height in, which then locks the width to the ratio - well this is my understanding anyway.

Thank you very much for your input Heather, it has definitely given me some things to try!

[Robbie_Grant]

 @pete1 ,

We are giving the Instructional Designers area a little bit of love and just want to check in with you.  This will also bring this question new attention. 

Were you able to find an answer to your question? I am going to go ahead and mark this question as answered because there hasn't been any more activity in a while so I assume that you have the information that you need. If you still have a question about this or if you have information that you would like to share with the community, by all means, please do come back and leave a comment.  Also, if this question has been answered by one of the previous replies, please feel free to mark that answer as correct.

Robbie