I hope you’re doing well. I would like to ask for your assistance on how to make changes on the desktop (base) breakpoint without affecting larger breakpoints.
I created a prototype on Figma (1920px wide) based on a 12 column grid and managed to replicate it on Webflow. The problem is that now that I want to make it responsive if I change anything on the desktop (base) breakpoint this affects the layout that I already created on the 1920px breakpoint.
How can I edit the desktop (base) breakpoint without affecting the 1920px breakpoint?
You have a problem with your CSS Grid and elements positioning inside of your grid. At this moment your grid is going out of you page and elements are jumping around. CSS Grid is powerful but need a bit more attention to set it up right for all breakpoints.
P.S: Designing in larger then 1280 doesn’t do any difference, and IMHO is not the best practice.
Thank you for your reply. I’m aware of the problem, that’s why I’m asking for assistance. How would you fix the grid and the positioning of the elements inside it then?
Did you ever work and wrote some CSS code to get basic understanding of CSS Grid? Im just asking to get an idea what is your level of understanding how CSS Grid works.
Yes, I wrote some CSS code at some point and have a very basic understanding of CSS Grid. As you can see, my experience working with it is not enough to solve this issue myself but if you provide some advice, I would appreciate it.
That’s totally fine. I can’t explain everything in detail HOW TO fix you design in CSS Grid as this will be a very long article. I will recommend you to set another simple project and take one of your sections create CSS Grid and start playing with positioning (auto, area, manual) and different columns amount for given breakpoint that give you basic idea what you can do with CSS Grid. I will also recommend watch this tutorial of Wes Bos - CSS Grid. One thing I have to mention that Webflow settings unfortunatelly does not follow standard syntax, mean eg. if you want to set item in first column stantard syntax will be start 1 / end 2 but in webflow it is start 1 / end 1 or webflow doesn’t allow -1 . Just to be aware of it. It will be hard to fix your grid setup and positioning, I will recommend start setting CSS Grid from scratch. One more advice. Is better practice to do one section fully responsible and then move on another, then create all sections at once and than trying to fix it, it will save you a lot of time. In your case make visible ONLY one section you will work on not to be distracted with odd behaviour of other sections. Hope that you will find these recommendations useful. Happy coding;)
I understand that it’s not possible for you to explain how to fix my design in detail, that would be too much. An overview of the solution (like a roadmap that could provide some direction) would be enough. This is pretty much what you just wrote, so thank you for that.
In my opinion, the biggest takeaway from what you said is to build one section at a time and make sure that it is responsive before moving on to the next one.
Based on your suggestion of setting the CSS Grid from scratch instead of trying to fix it to save time, I’m guessing that it’s not possible to achieve what I have originally intended, which is to keep the layout of the 1920px breakpoint as it is even if I edit the 1280px base breakpoint, right?
I also noticed that the syntax is different in Webflow. That’s why I have set the grid to manual. Regarding the tutorial series you shared, I noticed that min-max and auto-fill are some of the properties that affect significantly how the grid behaves when making it responsive. Would you suggest to define values for these settings on Webflow? Or what best practices would you recommend for Min W and Max W?
Last but not least, what you’re saying is that I should build the site (again) starting from the 1280px base breakpoint because it’s not possible to edit it without affecting the 1920px breakpoint?
Hi nan , what I meant is that design for 1920 is not best practice, at least for me. I’m working with 8 point system so for me is better to work with 1280 or 1100. Design 1920 you just make your life harder. if you want to spread site (page) to full width 1920 isn’t necessary because if you do not define max-width page content will take full space . I had recommend start grid from scratch because you have some odd positioning and spacing in CSS Grid viz image
I do not use minmax until I need it and this is based on what I need to achieve as in this example when I need to have total control over positioning and sizing. viz image below
I understand what you mean by not recommending to design for 1920 although this is a requirement for the project. The odd positioning of the grid that you see is because like I mentioned in the original post, I started designing based on the 1920 breakpoint as you can see here:
My problem is that when I edit the 1280 base breakpoint it affects the 1920 breakpoint as well and I wanted to know if there was a way to avoid that. In other words, adjusting the grid of the 1280 base breakpoint (to fix that odd positioning that you see) without affecting the grid that I already created for the 1920 breakpoint.
Sorry for the confusion when I said “building the site” again, I meant the layout of the site. My idea was to leave the layout of the site for the 1920 breakpoint just as it is and continue adjusting the other breakpoints (including the 1280 base breakpoint) so that they look right as well.
The problem is that when I change the layout for the 1280 breakpoint it also affects the 1920 breakpoint and I don’t want this to happen. However, it seems like there isn’t a workaround for this? I would have to build the layout of the site starting at the 1280 base breakpoint and then rebuild the 1920 breakpoint eventually. Same for the other devices.
In a few words, when using Webflow, you should start building the layout of the site from the 1280 base breakpoint and consequently adjust the other breakpoints, not the other way around.
If there’s anything else I should take into account, please let me know. Otherwise, thanks for your advice.
