Streaming live at 10am (PST)

Stuck with Responsive Behavior [ Newbie ]


#1

Hello Everyone,

I’m completely stuck with website as I have no idea why my website isn’t acting responsive. I understand the concept of width being 100% and height being auto, but my div block with my background info is totally going berserk! It randomly cuts off on some mobile devices, but shows up normally on others. On Retina display, the top/bottom padding doubles, and I’m just totally confused as to what I’m doing wrong… The positioning also changes depending on device.

I tried using Flexbox to see if that fixed anything, and it somewhat did; however, I’m totally being a perfectionist and want to know what best practices I’m not using that are causing all these issues! This is for my portfolio, so I want to make sure it’s perfect.

Could someone please take a look at my Read-Only link, and take a look at the About Me section? I’ve been spending 2 days trying to figure this out.

I’m also not sure how to change the size of my div block without cutting out some of the children.

Thank you for your help !


Here is my site Read-Only: https://preview.webflow.com/preview/nathaliediane?preview=a4687115b7aee0bdc9d2f6338619ffb9


#2

Hi @nathaliedianer

Can you update/re-paste your share link - it’s not clickable for some reason :slightly_smiling_face:


#3

Hey!,

Thank you for pointing that out for me! :slight_smile: I really appreciate it.

Here’s the updated link:
https://preview.webflow.com/preview/nathaliediane?preview=a4687115b7aee0bdc9d2f6338619ffb9

Thanks so much,
Nathalie


#4

SOLVED:

Hello!, Just thought I should follow-up in case anyone else comes across this. If the responsiveness in your page is behaving weird, definitely take a look into Flexbox. Also, make sure you understand vw , vh , % . Try going for 100% width + auto height for sections.

If your div block is “misbehaving,” play around with putting it inside a container. Don’t be afraid to put columns inside a div inside another div.

There’s definitely more to this, but this is for newbies who have tried dozens of times to make their site fully responsive and have it not work. I recommend completely starting over with the page after having an in-depth review of what I stated above. Also, watch tutorials for how other users create websites on Webflow, so you get an idea of what the typical “best practices” are.

Hope this helps!


#5

Awesome - glad you solved it, and yes definitely the way to go with the tutorials :slightly_smiling_face:

Whilst Webflow gives the option of responsive templates, if you are actually building from a blank canvas, full control is yours, so learning those responsive concepts will stand anyone in good stead as they plan and build for the different breakpoints.

For anyone finding this post after a search - take a look at these to get you up and running: