Multi segment full screen

Design help General
1

I have uploaded two images showing a new style of layout I am trying to replicate.

I want my website home page to display like this so I can get more information on a full screen as the user first drops on the site.

I have managed to play around but I am having problems when it comes to responsiveness.

I want to have the screen like the picture for desktop but then when on other devices I want to make each section equal height in a stack of 3.

Any help on this would be great and I think it will be another great way webflow can display content.

970×674 408 KB
948×605 321 KB

2

You mean one below each other?

This should be simple.

Structure like this:

  • section
    • container
      • div with the first image, display box
      • ROW widget
        • col1
          • div with second image
        • col2
          • div with second image

Now select to ROW element and go to the settings tab to set the row to display columns one above the other for the devices you want

http://vincent.polenordstudio.fr/snap/qt3n4.jpg

Adjust the height of the divs in the col1 and col2 as desired.

3

Yeah I managed to get to that point last night playing around but my problem was having the first image and the two rows displaying 100% of the screen on a desktop and then removing the 100% when on other devices.

1 Like
4

have you checked the other shoes site that’s in the discover section of webflow? https://webflow.com/website/trainergenuis

5

Sometimes I find if design is crazy complex I design desktop and tablet then turn off mobile view and make separate designs that are perfect for mobile and turn them off for tablet and desktop, does all that make sense?

1 Like
6

I do that all the time, at least on some elements, and now always for menus. Because this is what you’re supposed to do. Responsivity is great but it’s a technical thing, it does not do the Design job for you. You have to think your experiences for every device, and decide what parts of your layout are going to be daptative and what parts deserve a special mobile treatment. So that makes perfect sense.

Edit: and Webflow is the perfect tool for that, you don’t have to deal with CSS properties for that, the Settings panels is here to help what shows up where.

7

I think you both are spot on! I’m trying to focus on a design that adapts responsively rather than creating user experience based on the device.

8

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.