Highlighted

Responsiveness Not Working

New Here ,
May 09, 2017

Copy link to clipboard

Copied

I've created an html/css3 page and pasted it into the RoboHelp text area for the css and body individually. While it works when I preview it in RoboHelp, IE, and Firefox using Windows 10, after it's uploaded the responsiveness doesn't work correctly from my mobile phone or ipad. Also, my co-workers who have an earlier version of windows also view a layout that is all messed up. What is causing this? (I do not want to use the HTML5 responsive layouts provided by RoboHelp.) Please see the temporary link here: http://robohelp2.rlicorp.com/robohelp/server?area%3Dgeneral%26mgr%3Dagm%26agt%3Dwsm%26wnd%3DRLink3%7...

Thank you.

TOPICS
HTML5 layout

Views

370

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Responsiveness Not Working

New Here ,
May 09, 2017

Copy link to clipboard

Copied

I've created an html/css3 page and pasted it into the RoboHelp text area for the css and body individually. While it works when I preview it in RoboHelp, IE, and Firefox using Windows 10, after it's uploaded the responsiveness doesn't work correctly from my mobile phone or ipad. Also, my co-workers who have an earlier version of windows also view a layout that is all messed up. What is causing this? (I do not want to use the HTML5 responsive layouts provided by RoboHelp.) Please see the temporary link here: http://robohelp2.rlicorp.com/robohelp/server?area%3Dgeneral%26mgr%3Dagm%26agt%3Dwsm%26wnd%3DRLink3%7...

Thank you.

TOPICS
HTML5 layout

Views

371

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 09, 2017 0
LEGEND ,
May 09, 2017

Copy link to clipboard

Copied

Hi there

I clicked your link and it seems to respond just fine. At least, near as I could tell. Perhaps it would be helpful if you were to supply some screen captures showing what you see? Maybe what I'm seeing is exactly what you would see but for some reason you are considering it isn't what you wanted or expected.

Cheers... Rick (Also in Kansas City)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2017 0
Adobe Community Professional ,
May 09, 2017

Copy link to clipboard

Copied

Yup, looks fine to me also (using Chrome)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2017 0
Adobe Community Professional ,
May 09, 2017

Copy link to clipboard

Copied

I believe you need at least IE10 for responsive layouts to work properly. I think the first step with this problem would be to generate from one of the samples and see if those users have problems with those outputs.

Regarding the problem when uploaded, on a PC I see the two columns transform to one when the width gets to a certain point. On a Sony Xperia 3 Compact and a Samsung Galaxy Tab S2, the two columns remain, so same as you. Looking at the source code for what you point us to , I see it is not a RoboHelp output.

I think this one is outside where the forum can help you. Perhaps ask Willam van Weelden who does provide consultancy? He knows very well how the RoboHelp layouts work so may be able to help you integrate your work.

I'm curious though why you are using RoboHelp at all given that you have developed your own layout.


See www.grainge.org for RoboHelp and Authoring information

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2017 0
Adobe Community Professional ,
May 09, 2017

Copy link to clipboard

Copied

Rick and Jeff

Were you viewing on a PC or a phone / tablet?


See www.grainge.org for RoboHelp and Authoring information

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2017 0
Adobe Community Professional ,
May 09, 2017

Copy link to clipboard

Copied

PC & resizing the window to see how it all flowed at various sizes.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2017 0
LEGEND ,
May 09, 2017

Copy link to clipboard

Copied

Same as what Jeff did for me. I'm also on Chrome

tmp.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2017 0
Adobe Community Professional ,
May 09, 2017

Copy link to clipboard

Copied

The issue is with phones and tablets.

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2017 0
Adobe Community Professional ,
May 09, 2017

Copy link to clipboard

Copied

FF 53.0.2 seems to work with it as well (on a PC)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2017 0
New Here ,
May 09, 2017

Copy link to clipboard

Copied

Peter, I just saw your question. I'm new to the company and because I found it more cumbersome to figure out how to create within RoboHelp I just created outside of it and pasted in my code. The company still expects to output from RoboHelp. I tried playing around with the HTML5 layouts and couldn't figure it out.

Everyone is using IE 11, so we are above 10. Even I have that and it works fine with mine. The only difference between those where it doesn't work and those who do are Windows 7 and 10. Those of us with 10 it works fine and those with 7 it doesn't.

I could test on Firefox, but our clients can only access our portal using Google Chrome or IE, so in the end I'm back to figuring out the issue with IE on Windows 7.

Typically, they simply create a graphic and then add hotlinks to it. When I got here I said there's no reason we can't make one with code and make it responsive. Now I'm starting to see the troubles they were facing - especially since none of them know coding. If I can't get this figured out that's likely what we'll be doing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2017 0
Adobe Community Professional ,
May 09, 2017

Copy link to clipboard

Copied

Knowing that FF does not have the issue, could help identify the issue with IE.

It's late here so I'll take another look at the thread in the morning.

However, it would help if FF could just be tested.

I'm thinking security settings and update differences.

Peter Grainge

www.grainge.org

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2017 0
New Here ,
May 09, 2017

Copy link to clipboard

Copied

Ok, I will do that. I don't have that on my work computer, so tonight I will test it from my personal computer that does have FF. Thanks

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2017 0
Explorer ,
May 09, 2017

Copy link to clipboard

Copied

Since you've coded it yourself, check out this page Using media queries - CSS | MDN which describes the difference between "max-width" and "max-device-width" (and other things). I was bored, so I googled around to find something that would make Windows 7 not work with responsive design--and found nothing. It's probably, as Peter said, something to do with their IE settings, "compatibility view", or something like that.

Karla

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2017 0
Adobe Community Professional ,
May 09, 2017

Copy link to clipboard

Copied

Compatibility View will definitely "break" the site in IE, as it forces IE to act like IE7 when loading the site.

If the site isn't specifically list in Tools > Compatibility View but the first checkbox is ticked, check under Tools > Internet Options > Security > Local intranet > Sites, as it may be listed there. You could also untick the checkbox I mentioned; it might mean certain intranet sites don't work as expected, but you can then add them manually to the compatibility list. (You might need to untick the checkbox anyway, if the site is auto-detected as an intranet site, as I'm not entirely sure how all the security settings interact with it.)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2017 0
Adobe Community Professional ,
May 12, 2017

Copy link to clipboard

Copied

Curious to know the result of your home test and whether you have resolved this issue.


See www.grainge.org for RoboHelp and Authoring information

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 12, 2017 0
New Here ,
May 12, 2017

Copy link to clipboard

Copied

Thank you, I did not have a problem at home. In fact, I used a couple of computers and found no problem with them or IE. However, I did discover the following meta tag needed to be added and that did fix part of the issue. The biggest part, which was the scrambled look. Now I have to figure out how to make it look perfect.

<meta http-equiv="X-UA-Compatible" content="IE-edge">

However, the look is still not perfect. For example, I need to fix some padding issues that are only from her view as well and none other.

After-meta-tag-issues.png

I've also discovered that my media queries are not being recognized at all from a mobile or tablet. It does work when I simply resize the browser, but unfortunately, not when I actually view from a tablet or phone.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 12, 2017 0
Adobe Community Professional ,
May 12, 2017

Copy link to clipboard

Copied

Out of my territory but I had a similar problem with Dreamweaver until Willam van Weelden found I did not have the line below in my pages.

<meta name="viewport" content="width=device-width" />

RoboHelp works in a different way and that line is not needed. However, it might be worth seeing if it fixes things.


See www.grainge.org for RoboHelp and Authoring information

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 12, 2017 0
New Here ,
May 09, 2017

Copy link to clipboard

Copied

Apparently, it's only for IE, however the only two we are worried about are IE and Chrome. It also looks fine if you have windows 10. My co-workers who have an earlier version of windows, it gives the incorrect view. I've attached screenshots of what it's supposed to look like and what it does look like from various views. Thank you.

CORRECT_SM.jpgINCORRECT_SM.jpg

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2017 0
Adobe Community Professional ,
May 09, 2017

Copy link to clipboard

Copied

Which versions of Internet Explorer? That's more important than the

operating system.

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2017 0
New Here ,
May 09, 2017

Copy link to clipboard

Copied

Everyone is using IE 11, so all those who the pages works correctly and incorrectly are using the same version of IE.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2017 0
Adobe Community Professional ,
May 09, 2017

Copy link to clipboard

Copied

Just tried it again with IE11 on my PC & it resizes fine AFAIK...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2017 0
New Here ,
May 09, 2017

Copy link to clipboard

Copied

What could be another reason for the above inconsistencies with our computers? Additionally, the media queries are not carrying through to my tablet and phone.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2017 0
Adobe Community Professional ,
May 09, 2017

Copy link to clipboard

Copied

I don't know - I got a bunch of certificate warnings when I tried launching the site, so maybe JavaScript is turned off or security is tightened up for those computers that are having issues?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2017 0
Adobe Community Professional ,
May 09, 2017

Copy link to clipboard

Copied

Try testing a bad machine with Firefox. That would support Jeff's theory.

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2017 0