Responsive HTML5 Output - Images

Report · Apr 28, 2017

Hi.

I'm outputting a topic with 2 images in it, side by side, centred. Looks great on desktop and tablet but when switching to mobile view one image moves down, underneath the first.

Is it possible to have an image hide/disappear when the view shrinks to mobile size?

My knowledge of responsive HTML is very limited. Is this a setting that can be changed in Robohelp? Is it some HTML code I can add? Or is it just not possible?

Thanks

Report · Apr 28, 2017

It can be done with CSS and requires just a little work to set up. It is basically a two step process:

Create and assign an image style to the images you want to hide on mobile.
Set the image style to hide the images on mobile devices.

Set up image style

In the RoboHelp CSS editor, create an image style. You can use any name you want. Just don't assign any formatting, unless you specifically need it. For example, you can create a style named hideOnMobile.

In the topics, assign the style (using the Styles and Formatting pod) to the images you want to hide on mobile.

Set image style to hide on mobile

For the next part, you need a little CSS coding. RoboHelp can't do this through the editor, so open the CSS file in Notepad or the RH Code editor.

Paste the code below into the CSS (doesn't matter where). Here I assume your style is named hideOnMobile.

@media (max-width:320px) {

img.hideOnMobile { display: none; }

}

The 320px is the width of the device. Every device with 320px in width or less will hide the content.

Now simply generate and you're done.

If it isn't working

I ran into this the other day for another project. The code may not work even though your CSS is fine. Browsers may require a viewport meta tag to correctly interpret the width. The viewport is available in the Screen Layout, but it may be that you need it to topics as well. If you don't see a result, add

to the topics. You can do a find and replace operation to add this code to the <head> section of every topic. (Search for <head>, replace with <head><meta name="viewport" content="width=device-width, initial-scale=1.0">)

You can read more about the viewport here: Responsive Web Design Viewport

Report · Apr 28, 2017

Worked great, thank you.

Took me some further tweaking though. I did as you said, both parts and it still wasn't hiding the image. After lots of checking and playing around I then realised that my phone is wider than 320px! Changed it to 400px and it works perfectly.

Thank you very much for your help, it's very much appreciated.

Adobe Community

Responsive HTML5 Output - Images

1 Correct answer