Highlighted

Media Queries

New Here ,
May 16, 2017

Copy link to clipboard

Copied

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!

iPadMini.png

iPhone5.png

Topics

HTML5 layout

Views

374

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

Media Queries

New Here ,
May 16, 2017

Copy link to clipboard

Copied

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!

iPadMini.png

iPhone5.png

Topics

HTML5 layout

Views

375

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
New Here ,
May 16, 2017

Copy link to clipboard

Copied

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...
New Here ,
May 16, 2017

Copy link to clipboard

Copied

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...
LEGEND ,
May 16, 2017

Copy link to clipboard

Copied

Link doesn't seem to work for me. Endless loading symbol.

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...
LEGEND ,
May 19, 2017

Copy link to clipboard

Copied

Same for me; it won't load.

You're writing that RoboHelp doesn't use the queries. Where in RH are you expecting the queries to be adhered?

In the WYSIWYG editor, you can choose a media query to apply for the editor. It doesn't switch automatically. If the output does work, is there a problem?

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...
New Here ,
May 19, 2017

Copy link to clipboard

Copied

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.

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...
New Here ,
May 24, 2017

Copy link to clipboard

Copied

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%7...

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.

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...
Adobe Community Professional ,
May 24, 2017

Copy link to clipboard

Copied

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??

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...
Adobe Community Professional ,
May 24, 2017

Copy link to clipboard

Copied

The above link works for me too. At some point the two adjacent areas become one.


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...
LEGEND ,
May 25, 2017

Copy link to clipboard

Copied

Media queries are working for me as well. I can imagine the RoboHelp editor or preview not picking it up though. That one doesn't play with media queries like a browser.

Also, some of the CSS may not be picked u by the RH editor even though it will work fine in a browser. For example: font:"1em/1.62em" The RoboHelp editor doesn't like em measurements and more 'complicated' css won't show as expected in the WYSYWIG environment.

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...
New Here ,
May 30, 2017

Copy link to clipboard

Copied

Jeff_Coatsworth  wrote

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??

Since I only code it and my colleague generates it, I had to ask her for what she does. She says she Generates and Publishes it.

Willam van Weelden wrote

Media queries are working for me as well. I can imagine the RoboHelp editor or preview not picking it up though. That one doesn't play with media queries like a browser.

How do they appear in order for you to say they are they working for you? Are they consistent with the screenshots of what they should look like? Basically, the first change should be seeing the left column and the right column in the top row stack. The smallest version (mobile) will remove the icons and adjust padding for a best fit on smaller devices.

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...
Adobe Community Professional ,
May 30, 2017

Copy link to clipboard

Copied

Yes, it appears to scale just fine (although I'm not using an iPhone to look at it, just a browser) - maybe you need to take some screenshots of what you think isn't looking right. Your colleague will certainly generate and publish the output, but that doesn't answer the question of where it's being published to - any old web server or one that's running a version of RoboHelp Server (a separate hosting product not to be confused with RoboHelp HTML - the content creation tool).

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...
New Here ,
May 31, 2017

Copy link to clipboard

Copied

Jeff_Coatsworth  wrote

Yes, it appears to scale just fine (although I'm not using an iPhone to look at it, just a browser) - maybe you need to take some screenshots of what you think isn't looking right.

Yes, it always looks fine when I resize the browser, too. It also looks fine when I test it within RoboHelp and visit the browser.

This is the incorrect phone view:

incorrect-phone-view.png

This is the incorrect tablet view:

incorrect-tablet-view.jpg

While it looks nice, both of those views are meant to adjust for these screen sizes. For example, the tablet should cause the top row's two columns to stack instead of float:left; and the mobile would take that one step farther by also removing the icons.

Jeff_Coatsworth  wrote

Your colleague will certainly generate and publish the output, but that doesn't answer the question of where it's being published to - any old web server or one that's running a version of RoboHelp Server (a separate hosting product not to be confused with RoboHelp HTML - the content creation tool).

Colleague's answer is: "It is a RoboHelp server."

Here is the updated link to the published page (I'm told you should be able to see it even when not logged in): http://robohelp2.rlicorp.com/robohelp/server?area%3Dgeneral%26mgr%3Dagm%26agt%3Dwsm%26wnd%3DRLink3%7...

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...
Adobe Community Professional ,
May 31, 2017

Copy link to clipboard

Copied

Only RoboHelp 2017 works with RoboHelp Server and then only with RHS 10 for

its built in responsive layouts. Wondering if that could be an issue here?

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...
Adobe Community Professional ,
May 31, 2017

Copy link to clipboard

Copied

Also RoboHelp defines all its layout in css.layout with topic appearance in

the topics own css. I don't know enough to say anything else will not work

but I can nevertheless suggest maybe any other structure might not.

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...
Adobe Community Professional ,
May 31, 2017

Copy link to clipboard

Copied

trying-my-best​ - aha! Now I'm seeing what you're getting - I see the same thing on my tablet too. As Peter mentions, you need to ensure that your copy of RoboHelp Server is running version 10 (or maybe higher - not sure what the newest version of that is) - earlier versions didn't support Responsive HTML5 help files.

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...
New Here ,
Jun 09, 2017

Copy link to clipboard

Copied

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%7...

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.

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...
Adobe Community Professional ,
Jun 27, 2017

Copy link to clipboard

Copied

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

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...
Amebr LATEST
Adobe Community Professional ,
Jun 27, 2017

Copy link to clipboard

Copied

Ah, I had an idea. If IE is a problem, maybe you have rlicorp.com set in compatibility mode.

(assuming IE11)

In IE, click the cog, then Compatibility View settings. Check the whether rlicorp.com is in the list box and remove it.

If the website doesn't appear in the list, another option is that the website is an intranet site and you have "Display intranet sites in compatibility view" ticked. If the first option doesn't work, try unticking this checkbox and see if this fixes the display in IE.

This won't address your earlier tablet issues, but might at least clear up the difference between chrome and 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...