Our design calls for the left panel to have a background image (100% vh) with a logo centered aligned (horz + vert). On the right panel would be a text block with navigation links. My question is what happens to the right panel at smaller / mobile breakpoint? For a truly responsive design, the right panel containing the nav would stack below the left panel containing the image and logo. Since they are 100% vh, the text / nav would never be seen unless the user scrolls down.
What would be the best solution? Visually what we would like is on the mobile breakpoint the left panel would take up 100% of the device viewport, but the text / nav from the right panel would be accessible from a mobile hamburger menu.
Is this possible? Is there any documentation / videos that might be able to offer tips / solution? Is there anyone here that could give a suggestion?
What I would do is make the right text block stack on top of the other. Or potentially change it so that they stack but only take up 50%vh on mobile. That way they are both visible. If you can post your example we can better help.
Hello, thanks for the reply. Here is a quick wireframe of what I am trying to accomplish. The left hand block would have a background image set to fill and centered (the two grey boxes represent this image) On top of the image would be a logo, which is a png and a text tagline. On the right would be navigational links. I would like this design to take up 100% width and height of the browser down to tablet landscape. Any break point below that, I want to just see the left hand portion of the design (again 100% width and height) and have the links on the right roll up into a mobile navigation (a la hamburger menu).
Does that make sense? Again, thanks for any help / suggestions.
I understand what you meant, I was hoping to see your public link so I can brainstorm the best way to have it show on mobile. Do you think you can post it?
Basically, what I would like to happen is at the tablet breakpoint and lower, the left panel would be hidden and only the right panel would take up 100% of the viewport.
Hello,
So here is the demo with the basic building blocks put into place and so far so good (I do have a few small questions, but I would like to tackle to be issue first) What I am trying to do at this point would be at a viewport smaller than the tablet view, I want to hide the left hand block and have the right block of content to take over 100% of the viewport. Any suggestions?
If you are using divs using flexbox so that the left div will disappear on tablet, simply hide that div on the tablet device. You can do this via the settings tab for that particular item.
Then simply make the remaining Right div span 100% via the flexbox settings. You can also do this type of layout without flexbox by simply assigning a percentage width for both divs so that they add up to 100% and then hiding the left one on tablet and assigning 100% width to the other.
If you need any more information you would need to share your read only link so that we can better get an idea for exactly what is going on in your site. Share a read-only link | Webflow University
Awesome! Thanks so much for the assistance. I appreciate the help! Just a quick follow up question, After hiding the div, I shouldn’t have to adjust right div span since the Flex Child setting has already been set to “Fill empty space” –is that correct?
