Streaming live at 10am (PST)

How do I make website responsive?


#1

Hey people!

My website is right now not responsive and I have no idea how to make it so. The pictures are responsive, however the margins and the font-sizes are not. (FYI: I know basically no code.)

I've set my display on my computer to be viewed in a scaled resolution and it's in this mode I've made my website. This is also how I want it to look like on every screen, also when I minimize the window etc. See the pictures below for what I mean. Here is my public share link: LINK


And another question: When I change elements in tablet/mobile version - will that effect the elements in desktop version as well?



#2

Using containers will help your website adapt to other devices, Any elements in tablet/mobile version will not effect desktop version and will only effect the device which you have selected as the view point.

Matt :smile:


#3

Here is some images to show you;

Without container;

With container;

Matt :smile:


#4

Thank you for your answer, Matt!

The problem with containers is that they are set at 940px wide, which will not look good on every desktop screen. I want my content to stretch more than that. Do you know if there is any way of making it responsive with sections which I'm using?


#5

You could try this which will make the container wider.

Matt :smile:


#6

One thing to keep in mind about setting content specifically text to larger than 960 is that line length can become an issue so be sure to use columns.


#7

@jdesign: Yes - will do!

Btw, do you know how to make the font-size responsive? I looked at this post and they are taking about VH and VW but those are no where be seen. I've tried EM and % but none of them works.


#8

@jennynguyen you can type in (for example) "5vh" into the font field and press the enter key, this will make the font responsive as the screen is scaled downwards. Some very old browsers may not perfectly support this.

Best wishes :smile:


#9

@jaidenleach Magic!!! Thank you! 😄Do I have to do the same with line-height?


#10

@jennynguyen You're welcome! Yes, you should do the same with line height as well :smile:


#11

@jaidenleach Do you recommend using VH or VW for text responsiveness. I like the idea of using VW because then it scales well on narrow browser widths on desktop. But fonts can become to small unless a minimum pixel width could be established and there isn't currently an option for that in Webflow so your still left setting each viewport to a size or at least the phone viewport (although I guess custom CSS would work).

Although, I understand VH it doesn't make sense to me to use it for font scaling. I guess per device it works....


#12

Yes VH is best used for headings only, if you decide to use it. There is no real benefit to using VH on small text like body text, as it can quickly become unreadable. The current standard for font size in general is still PX and adjusting accordingly across devices (each viewport).

:smile: Happy Webflowing


#13

@jaidenleach, @jdesign: Hey again! Another question: Is it possible to make the resizing of the font size stop after a certain size of the window? I think the font sizes get way too big on a larger screen than 13''.


#14

Hello! Unfortunately this is not a native CSS property. You may be able to do it with some custom code and a media query for larger screens however.


#15

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.