Media Queries

Forum|Forum|8 years ago
May 16, 2017
3 replies
1269 views

I'm starting a new discussion because I've now got the page to the point where the only thing not working is Robohelp is not recognizing the media queries I placed within the code.

I figure it's a Robohelp issue because from within notepad it works when I open the page in the browser and resize the browser. Also, when I use the inspector tool and test it with different device options. In fact, I'm attaching two screenshots of what that looks like. One for the iPadMini and the other for the iPhone5. The iPhone5 image is the one without any icons.

The only time the media queries don't work is when it's gone through Robohelp.

I do have the proper metatag in the head:

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1" />

Any ideas? I'm running out of time. The project is due no later than Friday and I know my boss doesn't want to wait until last minute. I appreciate your help!

HTML5 layout

This topic has been closed for replies.

T

trying-my-bestAuthor

Known Participant

So, I have a little update because the last we discussed, it was thought the problem was related to the RH server didn't like HTML5, which is still likely. However, when you look at this link on IE, it doesn't work. The two divs in rowT stack rather than sit next to each other and when I inspect the code, I don't see anything for my media queries which sets the two div's width.

http://robohelp2.rlicorp.com/robohelp/server?area%3Dgeneral%26mgr%3Dagm%26agt%3Dwsm%26wnd%3DRLink3%7CRLink3%20No%20Background%26tpc%3D%2Frobohelp%2Frobo%2Fserver%2Fgeneral%2Fprojects%2FRLink3%2FHelp2.htm%26ctxid%3D9%26project%3DRLink3http://

However, it looks fine on Google Chrome. So, if it were the RH server, wouldn't it also fail to work in Google Chrome? There must be something I need in the code to fix it for IE as well.

Another strange thing, and this is likely related to my inability to wrap my head around RH, this link I just provided you above, when I view its source code, I find I need to go to this link below to see the page that contains my actual source code.

http://robohelp2.rlicorp.com/robohelp/robo/server/general/projects/RLink3/Help2.htmhttp://

And, when you view it, even in IE, from that second link - it also works fine.

So, what is happening from the first link to the second link? I don't know what is happening through the generating and publishing procedure that would cause one part to work and the second layer not to.

Thank you.

Peter Grainge

Community Expert

Maybe you have fixed something meantime but for me the first link produces the same result in FF, IE and Chrome. The top "row" shows Demos and Questions with FAQs below.

See www.grainge.org for RoboHelp and Authoring information

@petergrainge

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

T

trying-my-bestAuthor

Known Participant

We are having technical difficulties, so the link isn't working right now.

As far as the queries, I wrote the code in Notepad and pasted the css styling into the head and the body content into the body, so as not to overwrite anything in the head or otherwise RoboHelp may need. Where do I expect them to work? The webpage.

From my notepad version, they work. I test them by using the devices feature available in Chrome's inspect tool as well as simply resizing the browser window. Everything works as expected and planned. However, once the page is loaded through robohelp online, it no longer works.

As soon as our technical difficulties have been resolved, then perhaps things will make more sense as you'll be able to see the page doesn't use the media queries.

T

trying-my-bestAuthor

Known Participant

This link is now working. Whatever glitch that had caused it to endlessly turn has been repaired.

This is the link in question.

http://robohelp2.rlicorp.com/robohelp/server?area%3Dgeneral%26mgr%3Dagm%26agt%3Dwsm%26wnd%3DRLink3%7CRLink3%20No%20Background%26tpc%3D%2Frobohelp%2Frobo%2Fserver%2Fgeneral%2Fprojects%2FRLink3%2FErika_Take_3.htm%26ctxid%3D8%26project%3DRLink3http://

The question is why are the media queries not responding?

When I test the page before it goes through RoboHelp, everything works splendidly. I can shrink the browser and see it in action and I can view it in the different mobile views using the Inspector Tool and it also works just fine. The moment it goes through RoboHelp they no longer works.

Please help! I've up against my deadline and I have no idea why this isn't working.

Jeff_Coatsworth

Community Expert

You keep saying "However, once the page is loaded through robohelp online, it no longer works." - what are you talking about? You've generated the output (& as far as I can see, it scales just fine) - are you talking about hosting it on a web server that's running RH Server version??