When re-sizing the browser there is a mystery width which I am pretty sure is one of the event rows which makes them stop re-sizing smaller when the viewport goes under 1430px width. I am struggling work out what it is causing this. Any ideas?
This is where Webflow could do with a larger breakpoint. As the viewport resizes down I’d like the left-hand navigation to disappear before 992px (which is the first default Webflow breakpoint). I can use custom code, but as I have designed the layout using grid I am at a loss what the code would be. I’d need to hide the left-hand nav area and stretch the main content area into this space. Any help would be grateful.
Thanks is advance to anyone who wants to kindly have a look.
To get this done exactly how you want it, you would need custom code. But it would require in-depth details for site-wide code, or each individual page it’s on. Hmmm… I would skip doing this. It may get tedious down the road. This has come up before in many posts.
A good work-around is to: Give the use a choice.
Set the sidebar to remain fixed at a %. (lower % on each device)
Keep above all other content, something like 10 z-index.
Add button with one interaction for user to “Open List, Open Categories”, something like that.
Add another interaction for when a option is clicked, it slides and hides, then shows content
A Open List / Close List would work well for this type of site, there’s a lot of content.
This way the user can choose to keep it, open or closed, for any break point except mobile. Make the mobile fill entire screen and slide out after selection is clicked.
Use a “sticky” floating button on the edge - the user will be familiar with this for tablet and mobile.
I’ve used this type of functionality and it was pretty good. I didn’t mind the few extra clicks to keep a ‘clean’ viewport before I started reading.
This was about fixing a width that appears to have a minimum width. I’ve gone on to find out that’s it’s a grid-related problem and not with the content. But still trying to resolve.
I managed to find the custom code for this as follows: @media screen and (max-width: 1400px) {
.next-off-slider–slide { width:50%; }
.left-hand-nav {display: none;}
.main-content-wrap {
grid-column-start: 1 !important;
grid-column-end: 3 !important;
}
}
I assume i haven’t explained it clear enough so apologies for that. I have no idea what your solution was about.
