Trying to do my webpage responsitive - but it looks terrible!

[Brazzezz (Peter branzell)]

Good evening Webflow pros!

I am Peter, just a guy in Sweden that trying to create my own webpage in Webflow but after 1,5 months I am still struggling and I am just minutes from giving up.

I am “almost” there but when trying to make the page responsitive as in workable in Laptop, Tablet, Mobile landscape and Mobile portrait it looks terrible when I check it, why? In webflow it looks pretty ok but when I “Publish to selected domains” and copy and email the link to myself and open it in my mobile it looks more than scary, just terrible, why? Is it suppose to work later on or am I doing something wrong? I can not go further in the project because what ever I do it look redicoulous!

Every tips you can give me I am very thankful for!

Br

PBz

https://preview.webflow.com/preview/branzell-solution-iiii?utm_medium=preview_link&utm_source=designer&utm_content=branzell-solution-iiii&preview=88d1998653da8b9c94723941734d7d2d&pageId=6054ac7ac7031ab4fe3d3100&mode=preview

[mikeyevin]

Have you checked out any of the courses/tutorials in the Webflow University? It’s got tons of awesome, free content that can help with making your site responsive along with all sorts of tips and tricks to get the most out of the platform. If you haven’t dabbled with web design before, it’s a great resource to take advantage of.

Is there a specific issue you’re noticing on the site that you’d like help with? I took a quick peek and there are a handful of things I’d adjust but without a bit more information on what you’re expecting vs what you’re seeing would be helpful.

[jennavanrooy]

Hi Peter!

I’m not sure if you’re already familiar with this, but the Webflow Designer allows you to toggle between desktop, tablet and mobile views. You can then customize the sizes, styles, etc. of individual elements per view. See the red box in the screenshot attached.

Now, in regard to your text flowing off the screen in the mobile view - that’s happening because somewhere in your desktop view, you’ve set a really big width on the overall container of the content. You can see that “Div Block 6” is the class applied, and that it’s setting a width of 1000px on the container. When I remove that class, the text automatically breaks to adjust to the size of the screen (see below).

I’m not sure if this is the specific issue that you’re having trouble with, but my best advice would be to toggle on the mobile view and work through each page, adjusting what needs to be adjusted. And as mikeyevin said, Webflow University is a fantastic resource for any obstacles you run into!

[Brazzezz (Peter branzell)]

Hi Mikeyevin!

Thanks for taking your time and answering/helping me.

Well, I’m a sales guy with a masters degree in civil engineering and have been in the AEC business for more than 25 years and have thousands of contacts and know about people, market what ever! I know there is a need to helping people to move from desk A to desk B and I do think I’m the guy to help the, using 25 years of experience doing business in the Nordics and in Europe. I already have questions to help companies but! I haven’t a webpage. I am not a designer or had a clue on how to use webflow or how to design and built and so on…

My expectations are high but my knowledge in how to use webflow is low!

So, I’m open to everything because I do know that it can look both better and run more smoothly than it is now but I haven’t any idea in how to change it so it looks and work better?!
Yes, I’ve been looking at YouTube and the webflow sessions/lessons and picking up a little here and a little there and put it together the way it look now. The thing is, I started from zero with no knowledge about the program and If I had knew then what I know today I probably should have create it a little bit different.

So, I don’t know where to start? I mean that when working in webflow and do it responsitive from laptop to mobile it look quite ok but when open up the link in my mobile it look scary!

I do know that it is some things here and another things there that have to be fixed as in animations and so on but, to be honest? I’m stucked and just want to shipp it and start doing some business!

Thanks

Br

Peter

Skickat från Yahoo Mail för iPhone

[Brazzezz (Peter branzell)]

Mikeevin - jennavanroy!

Where ever you are, THANKS!

Jenna? Yes Im familiar the design the toggeling, that was what I was talking about. And you are soooo right, when I changed the width looks much better! I dont know how I remove the class though since it lookewd but I changed the max W to 100% and that fixed it, or?

IF you still are there I have some other questions for you? Under page “About us” and “Mobile portrait” I cannot see the whole page in the mobile, how do I do that, any tips?

More tip or, ALL tip are grateful!

[Brazzezz (Peter branzell)]

https://preview.webflow.com/preview/branzell-solution-iiii?utm_medium=preview_link&utm_source=designer&utm_content=branzell-solution-iiii&preview=88d1998653da8b9c94723941734d7d2d&pageId=60359858f92a1e04b096383e&mode=preview

[mikeyevin]

Your Section 5 element has a height of 100VH (meaning it will only display at 100% of the total viewport height)—removing this value should solve the issue and allow the full content to be visible:

Keep in mind that you’ll want to remove this value from the base breakpoint (the one farthest to the left with the star icon) so that the changes cascade down to your smaller breakpoints.

If you want to set a height style like this moving forward, try using min-height` instead—that will make sure your section can grow taller if needed (like in the case of the mobile breakpoint) without cutting off any of your content

[Brazzezz (Peter branzell)]

THANKS!

I mean, I cannot say how much I appreciate this but it is A LOT! Those “tricks” or probably, basic stuff helped me and I could easily fix it. With this, knowing I can get it responistive I can now go back and look at the grammar, do some changes and take some things away and make it (hopefully) look better!

I probably (CERTAIN!) come back with some more basic questions with easily answers and… The thing is, even if you guys think is obvious and easy to fix it is a obstacle for me and I appreciate it A LOT - The help and guidelines!

Once again, thanks both Jenny and Mikey for taking your time and helping a guy who have other strengths than designing in Webflow!

Peter

[adamdiscovers (Adam Mercy)]

I will say this. To design anything non-basic, requires you to work pretty hard to understand html structure and how to use it (divs/grids/flex, absolute/relative/static)

Webflow makes it easy to learn, but you have to put a lot of work into learning unless you execute on something stock.

[noorsalma]

Design for mobile first, it’ll make your changes for larger resolutions slightly more manageable