My Website isn't responsive and has become a mess overall to try and fix; So confused

Design help General
1

So I’ve been messing around with Webflow to get my portfolio in order every time I switch. breakpoints my entire content just becomes a jumbled mess. I know breakpoints scale down but for some reason, my entire site just becomes mush in mobile and other breakpoints while also having elements move around despite me not wanting them to when the browser window is resized manually. The stuff looks alright visually but under the hood, I feel it’s a complete mess for some reason and not truly working as it should

What exactly am i doing wrong and is it able to be fixed?

Feel like i should just go to Squarespace because the time it has taken me to get something going on web flow that can appease hiring managers to look at my work has become way too time consuming…

Read only link: https://preview.webflow.com/preview/reveals-fantastic-site?utm_medium=preview_link&utm_source=designer&utm_content=reveals-fantastic-site&preview=dbcb7639ce2bfb2f770539f1933b0bd8&pageId=62e6f5f51cbbc7fc06383ef7&workflow=preview

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

My guess is that you’re approaching breakpoints haphazardly, jumping around and styling. It’s important to understand that styles inherit from the larger breakpoints to the smaller ones. In a normal resolution site, that means Desktop → Tablet → Mobile-Landscape → Mobile-Portrait, like this…

image

That flow is GENIUS when you use it properly, because it aligns with the way CSS media breakpoints actually work. But if you try to ignore that inheritance mechanic, you’ll suffer.

Jumping around is bad for your process because if you style Mobile-Portrait first, and then jump to Tablet and make a styling change… Mobile-Portrait is going to try to inherit those changes. As a result, you will probably see unanticipated impacts when you switch back to Mobile-Portrait.

The best approach is to design top-down.

  1. Design for desktop ( or your largest breakpoint ) first. Make that look the way you want- every part including navigation.
  2. THEN, switch to Tablet view, and make styling changes you need to fit that breakpoint. Those changes will propagate down to the mobile views.
  3. THEN, switch to Mobile-Landscape view, and do the same. Your changes will override the styles inherited from Tablet, and will propagate to Mobile-Portrait.
  4. THEN, switch to Mobile-Portrait, and make your final adjustments… grid layouts, font sizes, margin widths, whatever you need. Changes you make there won’t break anything in the larger breakpoints

Once you get this, the design process becomes a joy in Webflow.
And to the Squarespace comment- yeah, you chose a Ferrari, and it drives differently. Power comes with a learning curve… I had the same confusion when I started with Webflow.

Two final tips for you;

In steps 2, 3, and 4 above, pay particular attention to your mobile navigation menu. Expand it, and make sure it make sense. You generally can’t see it in Desktop view, and it’s the central navigation experience for people not-on-desktops. At each breakpoint, you may need to change menu button sizes, etc., or even hide items on mobile to make it more navigable.

In steps 3 and 4, do your design work but then publish and look at the demo site on a phone. You’ll see important differences, that are not visible in the designer. Ideally, view it on both iOS Safari and Chrome Android.

Those strategies make the difference between a good site and a great one.

2 Likes
3

Howdy @Rpatten and welcome to the community :wave:

I know it can be frustrating to learn a new platform, but I’m sure once you get the hang of it you’ll find that it’s much more flexible than Squarespace.

To piggy-back on what @memetican said — since your project includes the 3 additional larger breakpoints, you’ll want to make sure all your initial design style changes happen within the base breakpoint (the center one with the star):

image
image758×110 1.86 KB

As you get smaller in viewport size, the changes cascade down, but as you go larger from that breakpoint the changes will cascade up. Essentially you’ll work outward from that point — probably first adding the styles for smaller screens and then going back to the first breakpoint on the left of the base size and working up from there.

The Webflow University has a great tutorial on the subject here, but I’ve also touched on this process in an older thread that you can check out here. Both resources should help give you a better idea of how best to go about making changes for different screen sizes without any styling surprises.

Hopefully that helps but don’t hesitate to reach out if you’re still running into issues :+1:

3 Likes
4

Thanks for all the advice, it means alot,

As for moving around certain elements, should I be using padding and margins to do this or is that incorrect? Seen some people say I shouldn’t be using padding to move stuff around but don’t really know of a alternative

5

It depends on what you mean by “moving.” Webflow follows HTML design conventions, so you’ll want to start by understanding HTML layout and design principles as well as you can first. Then just apply those in the Webflow designer.

By default, element positioning is “static” and determined by the flow of elements top to bottom and left to right, just like an English page. Within those areas, you can position an align items using columns, css grids, text alignment, and flex boxes. Everything is effectively a rectangle, so margins and padding allow you to control those aspects of a box for finer-grained control.

When you need to, you can override the default flow by using float and clear, Or changing an element’s positioning to Relative, Absolute, Fixed, or Sticky. Watch the Webflow courses, and other HTML design courses, but I’d encourage you to play quite a bit with basic design principles too so you can see how they work.

Understanding your options matters, because when you design, you want to plan your design so that it gives you the variability you need across e.g. desktop and mobile breakpoints. If you don’t, it might look great in one view, but be unusable on another device.

2 Likes