• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Showing different content depending on the browser size

Community Beginner ,
May 22, 2017 May 22, 2017

Copy link to clipboard

Copied

I'm developing a responsive HTML5 application where the same pages, that will be viewed on smartphones, should have different content when viewed in the desktop version.

For example, on a specific page to be viewed on desktop version, I will provide a full-size horizontal infographic. This same page, when viewed on smartphone, will have another version of the infographic, smaller and vertical.

I made tests putting the two versions of the content (desktop and smartphone) in a same page HTML, each inside a different DIV (_desktop  and _smartphone). Then, through the CSS code below I can hide one or other DIV depending on the size of the screen:

@media (max-width: 760px) {

# _desktop {

Display: none;

}

}

@media (max-width: 760px) {

# _smartphone {

Display: inline;

}

}

The problem is that bookmarks links directed to one version (desktop for example) do not work for the other version (smartphone) even though they are duplicated in both versions.

Because of this, in the smartphone version the links of the navigation menus do not work. It seems to me that the links keep pointing to the name = "..." which is at the top of HTML even with its DIV in Display: none.

Can anyone tell me how I can make the menu links keep working for the IVDs that are inline and disregard those that are in none?

Or, perhaps, a simpler way of showing different content on a same page depending on the the browser size.

Thank you so much!

Views

251

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
community guidelines
Community Expert ,
May 23, 2017 May 23, 2017

Copy link to clipboard

Copied

You are referring to developing an app but have posted in a forum that is for Adobe RoboHelp that produces online help rather than apps. However, you talk of content and that could refer to online help.

Are you developing an app or are you using Adobe RoboHelp?

I am no expert in this area but in the CSS for my site some images are shown or hidden using the following.

@media (min-width: 768px) and (max-width: 1096px) {

.image_pg {

    display: inline;

}

.image_acp {

    display: inline; 

}

}

Note that I have defined what is to be displayed on this size (.image_pg and .image_acp). On a smaller screen the value would be "none".


See www.grainge.org for RoboHelp and Authoring information

@petergrainge

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

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
community guidelines
Community Beginner ,
May 23, 2017 May 23, 2017

Copy link to clipboard

Copied

Peter,

I'm developing a responsive HTML5 project using Robohelp (I was wrong when I said that I was developing an application, sorry).

Your CSS code worked correctly, thanks.

My question now is: should I continue to use CSS to hide or display media depending on the size (I'm going to have a lot of work on the lines of code in HTML pages!), or is there a simpler solution to do that in Robohelp?

Votes

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
community guidelines
Community Expert ,
May 23, 2017 May 23, 2017

Copy link to clipboard

Copied

LATEST

The way RoboHelp works keeps the layout CSS quite separate from the content CSS. What changes is the layout as you switch from device to device. There is nothing within the editor to allow you to hide content according to screen size.

You would need to play with the layout.css file. When you have seen that, you will understand why I am wishing you good luck.

Another option would be a Multiscreen layout rather than a Responsive layout where you can use different build expressions to control the content by device. That is described in detail in the sample projects. Click Open on the RoboHelp Starter page and then click Samples in the ribbon on the left. However, Responsive is the only layout being developed by Adobe so Multiscreen is as it was in RoboHelp 11.


See www.grainge.org for RoboHelp and Authoring information

@petergrainge

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

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
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp