Skip to main content
B
Community Expert
Buc3Community Expert
Community Expert
June 2, 2022
Answered

Fluid Box Troubles

  • June 2, 2022
  • 1 reply
  • 1057 views

Hello everyone -

I'm going to try and explain my problem, see referenced images for clarification.

I have my desktop viewport so that I have 3 horizontal fluid boxes; a smaller box on top for title, a much larger box in the middle for content, and then another smaller box on the bottom for navigation buttons. My middle fluid box is then split vertically into two boxes, the left side taking up roughly two-thirds and the right take up the remaining one third.

My problem is that when it collapses into a smaller viewport, the 2 middle fluid boxes become the same size; they do not retain the 2/3 to 1/3 ratio and I can't figure out how to resize them after the collapse.

Any help would be appreciated!

Thanks!

    This topic has been closed for replies.
    Correct answer Lilybiri

    I threw together some real life mockups of what I'm trying to do.

    Hope it helps!

    Desktop_view is what the project starts with. I would like for the mobile view to be like the "What_I_Want" image, however, what I get is the image "What_I_Get".


    I don't think that this is possible with Fluid Boxes. Since the 'father' fluid box is defining the height, wrapping the child fluid boxes will result in them having that same height.  

    1 reply

    Lilybiri
    Lilybiri
    Legend
    June 2, 2022

    Did you use the Position Properties to set the height of the fluid boxes to a specific %?

    B
    Community Expert
    Buc3Community ExpertAuthor
    Community Expert
    June 2, 2022

    Hi Lilybiri -

    Appreciate the response.

    Height is greyed out under the position tab when selecting either of the middle fluid boxes.

    Lilybiri
    Lilybiri
    Legend
    June 3, 2022

    I am bit confused. Originally you talk about 3 fluid boxes, arranged vertically (you call them horizontal). I reproduced that: one parent fluid box and three vertically arranged fluid boxes. In the Position Properties I defined the height of each of the fluid boxes, and that worked fine. When scrolling throughout the different browser resolutions the height was always kept relatively to the height of the device, portrait and landscape mode.

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