Skip to main content
Diarm87
Diarm87
Inspiring
December 28, 2017
Question

Fluid boxes and responsive design. I'm having a problem.

  • December 28, 2017
  • 1 reply
  • 448 views

Hi, I've recently started using the Fluid Boxes in the latest version of captivate, and I really think they are a great addition to the captivate package.

I used often have trouble with projects being responsive for tablets, whereas using fluid boxes in general seems to make life a lot easier. 

I have two problems however.

My projects work perfectly with desktops, perfectly with tablets (in landscape mode), but on smartphones I can't seem to get it right.

1. The big problem is this. I design each slide with Vertical and Horizontal fluid boxes. I then add in all the different features, and that all works fine. When I change the settings to iPhone or iPhone 7plus or even iPad (portrait mode), all the vertical fluid boxes change to horizontal ones, and vica versa. This makes the project completely unusable on a smartphone. I'm not sure why this is happening and it means my projects are completely unusable on smartphones. 

2. This leads on to my second problem which is the "parent/child" feature. This doesn't seem to be as effective with the fluid boxes. For example if I change a horizontal fluid box to a vertical one in "iPad mode" then it automatically changes fluid boxes from vertical to horizontal in "desktop mode"! This is also the case with text. In the old versions, if the text didn't fit properly in "iPad mode" or "iPhone" mode you could just shrink the text and it would not effect "desktop" mode. But now if I change the text to font size 14 in iPad mode then it also changes it in "desktop" mode! 

If there is any way to avoid the above issues I would really appreciate it.

Also if there are any relevant discussions or blog posts on tips using Fluid boxes and responsive design I would appreciate that also!

Thanks in advance. 

    This topic has been closed for replies.

    1 reply

    Lilybiri
    Lilybiri
    Legend
    December 28, 2017

    I am not sure to understand your questions completely. From your second question however it looks to me that there is some misunderstanding. WIth Breakpoint views you can set up a different design for each of the breakpoints, but that is NOT the case for Fluid Boxes. There you need to use one design that fits all: fluid boxes can be rearranged due to shrinking of the the real estate on smaller screens, but there is NO parent-child relationship as you have with the Breakpoint Views work flow. The dropdown list available in Fluid Boxes UI are no breakpoints, it is just to allow you to switch quickly to another screen to be able to check if the setup of the Fluid Boxes offers the wanted result (alternative for the dragging of the width slider). If I misunderstood, my apologies.

    I wrote a couple of blog posts about the master slides in Fluid Boxes work flow:

    Tips for 'Fluid' Quiz Slides - Captivate blog

    Fluid Boxes and Master slides - Captivate blog

    Guides and Fluid Boxes: Best Buddies! - Captivate blog

    But I think you will get more of this article:

    Fluid Boxes Or Breakpoint Views? - Captivate blog

    Diarm87
    Diarm87Author
    Inspiring
    December 29, 2017

    OK, thank you that is helpful. I was beginning to think that was the case alright.

    Can I explain my first point a bit clearer.

    If I create a slide with 5 horizontal fluid boxes for example, and fill them with content. 

    When I go to the dropdown list and go to iPad or iPhone, or any of the others it automatically converts the horizontal fluid boxes to vertical ones! 

    When I publish the project it works perfectly on Desktop, perfectly on a tablet in landscape mode, but if I view it on a smartphone or a tablet in portrait mode, then it changes all the horizontal fluid boxes to vertical and vica versa, making the project completely unusable!

    Lilybiri
    Lilybiri
    Legend
    December 29, 2017

    They do not change to vertical, but some boxes will move to the next row if

    this is the way you set up the wrap field. If you want them to remain in

    one row you need to change the wrap to 'Squeeze in a row'

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices