My page breaks up when I change my screen resolution

Hello,

This is my first project in webflow, so please don’t be so tough on me! :smiley:

So, what’s happening is that every time I change the resolution of my screen that all site breaks up. I have no idea why this is happening. Also, I have a DIV called “main_wrapper” that changes position in almost every breakpoint.

Some help would be very appreciated.

Thank you


https://preview.webflow.com/preview/geridade-box-model?utm_medium=preview_link&utm_source=designer&utm_content=geridade-box-model&preview=6b7c46737075398b2a3b176365e7482e&mode=preview

Hi, and welcome to Webflow and welcome to responsive design!

This is the expected behavior as responsive websites change based on the width of the browser. I suggest spending quite a few hours (50+) on the university site watching videos and learning about responsive layout and Webflow before continuing with your build. There is a lot to learn and Webflow does have a pretty steep learning curve.

I wish you the best of luck in learning Webflow!

Hi Dave,

Well thank you for your reply, I appreciate your effort to be helpful, but you actually did not.
I believe I asked a very direct and specific question, and it was not only about the responsive breakpoints issue (the issue is in the height or to be more specific, in the vertical positioning, not the with) As I said “… Also, I have a DIV called “main_wrapper” that changes position in almost every breakpoint…”

Well, so once again thank you for the links ( a very diplomatic way to say: — “go and learn you dumb ass!”) :smiley: I don’t have 50hrs to dig in so I can solve this particular issue.

And Dave, I am sure I don’t have to tell you that the best way to learn is doing it not only watching videos or tutorials, is actually doing it and make mistakes. I do believe that what I did with that page is already showing I actually watched some videos. Don’t you think so?

Thanks anyway

Your divs change their position because you have not gone through all your elements to manually adjust your design for each breakpoint. I was attempting to help with links to help you learn a bit more about responsive design but It seems my attempts aren’t enough. Just as a reference, I spent about 200 hours learning and practicing responsive design along with researching best practices for the web before building my first website in Webflow. This is pretty common in order to learn how this platform works, especially if you are unfamiliar with how responsive design functions. I apologize if this is not enough but this is all I can really offer you as your inquiry is far too vague and offering specific support on every element for every breakpoint isn’t exactly what forum support is about. If you have a specific question about a specific div that is not behaving as expected, that might be a better question but what you have asked involves many divs. If you are interested in hiring someone to help with the entire site, I suggest perhaps posting in the freelance category. I’m sorry I cannot be of more service.

Dave,

thank you for your support. :pray: :pray: :pray: :+1:

P.S. I did specify a DIV in my question :wink:

Your div position isn’t a result of the div position itself but the positioning and visibility of every other div above that div moving it around based on viewport. If your div moves around like that, it is due to what’s above it, not where it is set.

thank you Dave I appreciate your help.

:pray: :+1: :wink:

Carlos, can you please reformulate your question?

At this point the only question I see is

Can you explain what you mean by that? Changes in what way? All I see is it is reacting to the styles you yourself (probably) put into it and the Section element.

Hello Dram,

Thanks for your reply. What styles, and witch Section? the header section?
I did publish the page and it’s not working n mobile though in the Designer does not show any problems!!

I am also having this issue in the 1920x… break point. It’s seams to be everything ok in the Designer, but when I publish it that DIV bar is moving down, and, in the designer mode I am not able to move it.

https://geridade.webflow.io/

Styles that you apply to the main_wrapper on different breakpoints.

The div that is called Section in your project.

The part you made your screenshots of for mobile resolution mobile on both published site and from inside designer look the same unless I am missing something.

Not seeing any moving down on my end for that resolution. Here. What browser are you using?

thank you a lot for your help, I used the browser inspect to check where the “bugs” were and I guess i managed to solve it.

https://geridade.webflow.io/

Thank you :pray: :pray: