so I can choose a template which is responsive, easy enough, but I’m building a site from scratch right now, and it looks fine on desktop, and absolutely horrible on mobile. What kind of things do I need to do to make it responsive? Or at least scaled down so everything fits on the screen.
indent preformatted text by 4 spaces
These are very important buttons. Click on the device (associated button) and change whatever is needed for the associated device.
Ok, except when I edit the site in one of those views, it changes the site in all views so that doesn’t help.
The site looks the way I want my desktop, I don’t want to change that, I just want to change how it looks on mobile.
Hey @James_Welbes,
I’ve found things such as changing column sizes in one of the mobile views reflects across all platforms including the desktop view, and understandably too. However, things such as spacing, font sizes, margins etc. can all be edited individually across the tablet/landscape/portrait platforms to make your content ‘respond’ better to the different device sizes.
You’ll notice that after developing your desktop view to how you want it (as you’ve done) that when you go to tablet/mobile views things such as margins and paddings should be orange - which, in my terms, means they’ve been carried across from the default or already set up settings. You can change these, and they turn blue, which means they are specific to the device view you’re looking at.
If you’re trying to have different text, images (i.e. a different look) for your tablet/mobile devices, you may need to utilize the visibility settings so that some things are only displayed on desktop, some on mobile etc - see the image I’ve added.
Hope this helps a bit!
Kind regards,
Dom
Basically it works like this.
Set it up so that it looks good on a desktop.
Then switch to view to tablet… make it look good on the tablet.
Changes you make reflect downward - not upwards.
So everything you change in tablet view - will not affect the desktop view.
It will however, affect the smart phone view.
When you get the tablet view looking good… switch down to the smart phone view… and it make it look good.
Sounds simple… and it’s not that difficult once you get used to it.
Just give it a try - you can always restore from a backup version.
that kind of makes sense. The trick now is figuring out which things work the way you described and which don’t.
I’ve already figured out that image size does not work the way you described. If I change the image size in mobile view, it changes it for tablet and desktop.
But changing things like margins and what-not seem to work the way you described.
I suggest you go watch all of the tutorial videos from the link in the upper right of the forums. Webflow is not a simple builder where you can just throw together a site with no experience in the interface and expect it to look good. It took me a good 2 weeks before I could build a responsive site from scratch confidently. The videos are your friend. Especially the one where it’s building a site from start to finish. Keep in mind the interface for the videos is slightly older but it should be pretty easy to figure out what is what in the new interface. Good Luck!
I agree. I made the mistake of trying to build from scratch - desktop looks fine, and I thought I optimized for mobile views. But on my actual devices (looked on phone, tablet, etc.) looks terrible. The root of the problem is that I clearly am missing how certain elements resize based on the screen. Different size (px vs % vs VH) for example, change things… which must be why I am having this issue…