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...
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)
Yup, looks fine to me also (using Chrome)
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
PC & resizing the window to see how it all flowed at various sizes.
Same as what Jeff did for me. I'm also on Chrome
FF 53.0.2 seems to work with it as well (on a PC)
The issue is with phones and tablets.
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
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.
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
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.
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.)
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.
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.
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
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.
Which versions of Internet Explorer? That's more important than the
Everyone is using IE 11, so all those who the pages works correctly and incorrectly are using the same version of IE.
Just tried it again with IE11 on my PC & it resizes fine AFAIK...
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.
Try testing a bad machine with Firefox. That would support Jeff's theory.