3 Replies Latest reply on May 23, 2017 9:07 AM by Peter Grainge

    Showing different content depending on the browser size

    Gian Zelada

      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!

        • 1. Re: Showing different content depending on the browser size
          Peter Grainge Adobe Community Professional (Moderator)

          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

          • 2. Re: Showing different content depending on the browser size
            Gian Zelada Level 1

            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?

            • 3. Re: Showing different content depending on the browser size
              Peter Grainge Adobe Community Professional (Moderator)

              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