After several watching Webflow videos and banging out some images on illustrator, I finally got my portfolio looking the way I want it. The problem is that the page looks disastrous in mobile view. This is my first attempt at designing a page, so I don’t know where to even start. The paragraphs are in the wrong places and the icons are too large and/or all bunched up. I thought I’d be able to simply go into the mobile view and change things to a smaller scale, but to my surprise changing certain things in mobile also effects the computer view.
Sorry for the basic question. I barely learned about containers and why they are necessary. My first version didn’t have any, so I had to go back and do a lot of it over. I’m guessing I’m probably missing something that’s fundamental to making responsive pages. Any help would be greatly appreciated.
The structure I usually work with is Section>container>content. Where the section has padding to set the space on the inside and the height is set to auto. By having the height on auto, the section will automatically change for mobile views. Then all you do is change your image width or font sizes as you go down through devices and everything should be pretty good. Your site seems to be structured very differently than how it should be, with many sections having margins and also manual heights instead of using padding around content to define height.
Don’t get discouraged, I watching probably 10 hours of videos before I successfully built a full responsive site in Webflow. Carve out some time and watch every video you possibly can and I guarantee you, it will all become clear. Good Luck!
Just to be clear, changing styles in mobile view only affects mobile view. If you’re actually modifying content (adding an image, deleting a div block, modifying text, etc.), then that affects all views. But style changes only affect the view you’re in, plus any smaller views. For instance, making a style change in tablet affects mobile landscape and mobile portrait, too.
You can also receive responsive design by using the VH/VW/EM measurement system, although this takes some time to learn and master, but can save you a lot of time in the long run.
