Streaming live at 10am (PST)

Difficulty of Designing the websites for different devices


#1

Hi Guys,

I just start to learn webflow and I super love it. Right now, I am making the website for desktop and I notice that when I switch to different devices (such as tablet and mobile phone), the website is completely messed up...

What is a good way to adjust the websites for different devices? Do i have to adjust the size of each section?

Sorry for my noob question and I appreciate everyone's help here.

Love u all.

MOOOOOSE


Here is my public share link: LINK
(how to access public share link)


#2

Adjust it for every breakpoint & use % where you can instead of px.


#3

Another very good method is to use VH/VW/EM measurements so that your website will look great on all monitors and phones regardless of size. If you want further information and how you can utilize these amazing features just reply back and I will go into detail for you on how to use the functions and how they work. It really isn't that hard and a lot of designers are switching to VW/VH/EM.


#4

Thanks. Dharma, I will try harder..but sometimes I have problem centralizing the words in a container...


#5

Hi @supermoose Thanks for joining the community.

Can you please update your post with some more information so we can help you faster? Things like screenshots and your environment info really speed things up.

Posting guidelines can be found here: http://forum.webflow.com/t/posting-guidelines-for-the-need-help-category/8094

Thanks in advance! :slightly_smiling:


#6

Hi DharmaNode!

Can you give a little more detail on VH/VW/EM measurements please? I have just completed my design for the desktop and now I have to amend accordingly to suit the other devices. Any help on this would be greatly appreciated!

Cheers,
Irish


#7

Ofcourse @irishdesigner

Different measurements:
VH stands for: Viewport height (screen height)
VW stands for viewport width (screen width)

VH: Relative to 1% of the height of the viewport. So 1VH would be fitting 1% of the viewport's height (VH)
VW: Relative to 1% of the width of the viewport. So 1VW would be fitting 1% of the viewport's width (VW)

So if you have a section with 100vh as height it will always fit the screen no matter what device.

EM: Relative to the font-size of the element (2em means 2 times the size of the current font)

Be sure to check out this link to learn more about CSS Units:
http://www.w3schools.com/cssref/css_units.asp

Hope this cleared it up :wink:


#8

A great feature of VH/VW/EM measurements are that it looks good on all monitors and can adjust to your mobile view easily as long as you use the measurements correctly. On huge benefit that I found with using all VH/VW/EM measurements fully on my site is that what you see on your monitor the user will see as well. No matter the screen size! A problem I experienced with percentages is that it does not adjust with a perfect ratio. Although when I use VH/VW/EM the ratio is perfect. One example includes you having a small monitor to work with. If you use the VW/VH/EM measurements then exactly what you see on your monitor a user who has a bigger monitor will see the same thing. This is the result of not only the text Div Blocks growing to fit the monitor size as with percentages but VH/VW/EM also allows text to grow and increase. Allowing for a perfect ratio of everything that is set on VW/VH/EM. Just to sum it up on what the purpose of VH/VW/EM is. The same thing happens with the iPhone screen. It adjusts automatically in most cases if you use it right. I think DharmaNode gave an excellent example although if you still do not understand be sure to ask any questions. I am here to help.:smiley:


#9

Thank you both!! This is a fantastic forum. I will do my research and get back to you if needs be.

Cheers :smiley:
Irish


#10

Thank you both, Vlad and Dharma. Do you guys have a link for a video that shows how to use VH/VW/EM? I understand the concept, but it will be great to see someone demonstrating it <3.


#11

@supermoose All I did was play around in Webflow for about 30 min in Webflow and I got the hand of it. But if you are the type of person that would learn much more from watching a video I would ask @DharmaNode since he seems to know a lot more about the definitions and where you can find all the official information about VH/VW/EM. :grinning: Webflow also has a blog about the measurements found here: https://webflow.com/blog/how-and-why-to-use-vh-and-vw-in-webflow Hope this helps. :grinning:


#12

Awesome, thanks, man! Btw, I checked your website and it looks good :grinning:


#13

Quick question on viewports, do we need to add the meta name="viewport" content="width=device-width, initial-scale=1.0" tag or is it already in the head code on webflow?


#14

Sorry @kimAllen I'm not sure about what you mean. Are you asking how you are able to utilize VW/VH/EM measurements in Webflow? If so all you have to do is type in for example "1vh" in height and "1vw" in width in the Webflow developer tool. EM is for text and you can choose that by pressing the measurement and selecting EM, just like you would select px or %. Hope this helps.:blush:


#15

the meta tag for the viewport should be in your head text, I was just wondering if it was there by default or we should include it in the header text like I did here?
[the settings panel for my site
]

(https://webflow.com/dashboard/sites/kims-fantastic-site-d07da6/code)


#16

@kimAllen can you please send a screenshot I am currently using an iPhone. :grinning: Hope you understand.:sunglasses::blush::smile: thanks.


#17

https://webflow.com/dashboard/sites/kims-fantastic-site-d07da6/code


#18

Sorry @kimAllen I do not know code though what I think your question is, "do you need to add any custom code to have VH/VW/EM measurements ?" Is that your question?:wink:


#19

yes I know the code but have never looked at the rendered code from webflow to know if the viewport meta is included since I am new here


#20

As I am confused about what you want I will just say that to have VH/VW/EM on Webflow you do not need any custom code what so ever. Hope this answers your question. If not, be sure to tell me and I think I will eventually understand it. :grinning::smile::blush::wink: Sorry I am so confused.:wink: