Streaming live at 10am (PST)

Responsive design: what's the difference btw element that is responsive and the one that isn't?


#1

Hello,
Nothing moves except my logo when I shrink the size of my website…
Can you show me how I could move my elements, please?


Here is my public share link: [LINK][1]
([how to access public share link][2])

[1]: https://preview.webflow.com/preview/ejs-superb-project?utm_source=ejs-superb-project&preview=1fdf6e3323af0707d90ae3b6e5954925 [2]: https://university.webflow.com/article/sharing-your-sites-read-only-link


#2

Responsive websites will restructure and position its content differently depending on the device that the website is shown on. Difference widths usually determine when the change is going to happen. Designers and developers refer to these different widths as “break points”. You can write what’s called “media queries” for different “break points” which are just different design rules for the how the content is structured for different widths/devices.

Webflow makes this really convenient by being able to toggle and design on different “break points” by selecting the different icons at the top of the designer which refer to either desktop, tablet, mobile landscape or just mobile as shown in the image below.

Unresponsive websites don’t resize or restructure it’s content to look good on all devices. They either stay the same width (which ends up hiding content because it can’t fit on smaller screens) or just breaks and smushes content to where it’s unreadable on smaller devices.

I hope this helps shed some clarity :grin:
-Noah


#3

Hi @EJ_Byun

As @J_Canan rightly pointed out, using the breakpoints helps define the design based on the device being used to view your site.

Creating a site for every single screen size is impossible though, so making things move depending on the screen size, whatever that may be, is the best thing to do.

When you use pixel sizes as you have done in your project, then you are telling the div block to be 1220px, no matter what. Webflow is great because it listens to the commands you give, and it won’t budge from 1220px.

So a great trick, is to set a maximum width of 1220px, and width of 100%. This tells Webflow that on a huge screen, that div block will be maximum 1220px, but if the screen is smaller, then it will stick to 100% of whatever screen it’s on. :crazy_face:

This can sound a bit confusing, so i did a video to try and help and as it uses your design it will hopefully be clearer. It’s around 7minutes, and sorry in advance if I’m waffling on a bit! :joy:

CloudApp

You can also check out the university videos on responsive design too: https://university.webflow.com/topic/responsive-design

If you have any questions, please feel free to reach out here anytime :slight_smile:


#4

ah! Thank you so much for clarifying. I was able to figure out!


#5

Thank you so much magicmark, I followed what you said and it worked really well! Took me a good time to fix it, but I am so satisfied :smiling_face_with_three_hearts: