Mobile first - question

Discussion Ask a question
1

I’m working on a project where I have to start from mobile mode and only after that I’ll design the webpage for desktop.
The problem is that changes on the largest breakpoint affects the smaller breakpoints (which is already perfect and needs no change).
Is there any way to set it so changes on the smaller breakpoint will affect the larger breakpoint and not vise versa?

2

Let me start by answering your question: No, that’s not an option.

‘Mobile first’ isn’t really a workable approach to implementing your design in Editor X. But I don’t think ‘desktop first’ works terribly well either. Often things you do on the desktop can be hard to undo on mobile.

You can design mobile first, if you like, but you shouldn’t implement it first.

My approach is simultaneous implementation. Before I implement anything, I know how it’s going to work at all my breakpoints. Then I build it up piece by piece, making sure each piece is structured correctly at all breakpoints before I build on top of that piece.

So, for example, if I’m doing a grid, I set the grid on the desktop but – before I put anything on the grid – I go to each breakpoint and adjust the grid as necessary. At the mobile level, that may mean (as a simple example) changing a 1-row 2-column grid into 2-row 1-column grid.

I also use more containers than might seem necessary, because it’s easier to move entire containers rather than fussing with individual pieces, and because I can use grids within those containers to assist in adjustments at different breakpoints. (And containers are easier to find in the layers panel when an entire container seems to have disappeared on mobile).

My main point is this: Don’t build your entire design at any single breakpoint and then try to adjust it at other breakpoints. Instead, build it piece by piece, making sure each piece works on all your breakpoints before moving to the next piece.

2 Likes
3

Thanks for the insightful answer. (But in my case, this is the implantation order I need due to some business considerations. I hoped there was an option to set it so the cascading would go from smaller to larger. So apparently there isn’t and I’ll have to manage somehow :slight_smile: .

4

@jonatandor35 My issue was the same as yours. This solved my problem. https://www.editorxcommunity.com/forum/general-discussions/load-a-different-image-on-mobile

1 Like