Hello everyone, and Merry Christmas!
I had a few questions about making a page responsive as I am used to writing the code and not using platforms like Webflow.
First off, I noticed our page has this massive extra spacing here that I am unsure how to fix, and from my knowledge of CSS, I do not want to fix it using only margin and padding to fix this:
Does anyone know a good way to make a responsive website on this platform? I am so used to my media query snippets and CSS3 styling I would like to know what I am missing. I tried putting CSS into the <head>, but it doesn’t seem to work.
Do I need the paid plan to do this?
Anyway, thanks for reading this and for anyone that can help. I sincerely appreciate it while reading tutorials and watching videos on RWD for Webflow.
On the Webflow interface there is a right-pointing icon just to the left of the Publish button. Click that and turn on Share Read-only Link. Copy and past into a reply here. But YES, Webflow builds VERY MUCH responsive designs with NO hand coding.
Thanks! Great Christmas gift. This is a private website, so I wanted to direct message you the link, but it seems I am too new to the forum or cannot DM you.
Also, an important note here: a developer I am working on the site with imported a lot of this through Figma, and I almost want to redesign the entire website because it seems like that broke it.
I now see all the extra space to the right of the content. It appears that none of the containing
‘boxes’ are centered. Webflow suggests -best practice is all, not really necessary- that content go into Sections then into Containers and/or a div so that the child elements can centered. Putting content into a Container, setting its’ display to Flex then aligning and justifying would go a long way in repairing your site. I’ll do a little repair on the top few elements then post a screenshot in a few minutes.
Thank you so much! I would love to screen share with you to learn it as I learn better visually, but I will look over what you did and continue to repair this website into something worth publishing.
I also greatly admire, respect and appreciate your assistance on Christmas day!
I did the Section Header to oneSpacing div block. So I believe that one is mostly good and the Section Intro part. The rest was when my friend took over and imported everything from Figma.
But if I made a mistake even on those, I would love to learn from you! Thank you so much, as I am doing this on Christmas Day because I genuinely love web design and development.
I actually just graduated with my Associate Degree in Web Design & Development three weeks ago, and I am finally working a job I feel is more of a hobby I am paid for. So I would like to repay the kindness you are giving me. While he worked on the rest of the website, I designed the assets in Adobe Photoshop etc.
The Branding and menu are fixed into a container set to flex. Redoing the entire page will take an hour or so. Also I notice div blocks being used for spacing. Although that of course works there are much better ways of spacing content.
Display Block stacks content right on top of each other. Flex, or at times, Inline Block is a better Display setting
At the top of the Design interface are little icons for setting device breakpoints. Best practice is to start at either the largest or the smallest dimension, get it right then move to another size and tweak some more. Webflow will put the required media-queries in the css.
Thank you! Since it is read-only, I believe no changes were made:
I wish I could have seen you do it. It is difficult for me to learn by just reading what you did, but I am thankful, and I am attempting to implement what you said right now.
I’m nearly 80yo and long ago retired. I do this computer stuff to help keep my mind busy and for entertainment. Here is a 4 page site I did last week (actually my first Webflow project) wherein each device size on each page is laid out fairly well. The site was assembled piece meal since I used it for learning. But here’s the code for a look-see
Early on in the ‘Responsive Web Design’ days the rule-of-thumb was to start small to large. With Webflow it really makes no difference. I think Adobe Muse got me doing it that was when they introduced responsive
