I am trying to recreate a similar look as the inspiration page, as this will be shut down shortly and the URL redirected to this subpage.
The main issue is regarding the layout for the Floor Plans section I am trying to make the images display larger but depending on screen size it should overflow vertically I’ve tried using V Flex, H Flex, etc. to dictate alignment but that seems to cut the images off unless I select show overflow but then they overlap other elements.
Second issue is the text alignments under where the Title does not align the text.
Here is my site Read-Only: LINK
(Inspiration Link: LINK)
It’s difficult to understand what you want without screenshots, but I think you’re asking about making the entire Floor Plans section responsive.
The easiest way to do that in your layout is to make Flex Block 10 a grid, flowing across then down. That way you can control the number of columns, e.g. 4 at desktop, then override that to 3 at tablet, 1 at mobile landscape. That will cause your sliders and cards to flow vertically in a column on mobile devices.
Regarding image sizes, I can’t picture what you are trying to do.
Regarding the text, you have an H3 configured to a large font size which will make layout control there difficult. I’d change that to a regular text layout. The rest is just configuring your flex correctly for the layout you want.
This mostly works, I updated the grid and heading as suggested, although this makes the gallery navigation and photo overlap more obvious. I am planning on resizing photos to a uniform size, but the left/right icons are laying on top of the photo and images lay under the lower controls.
I’ll play around with it some more, thanks for the suggestions!
Yes that’s how sliders work. You do have some styling control with Webflow’s sliders so I’d recommend you use Made in Webflow and online resources to see what’s possible.
If the sliders are auto, you can probably just hide the left-right arrows or else hide the 3 dots.
