Trying to figure out responsive web design

Hello there :slight_smile:

I just watched a tutorial on responsive web design but I am confused about something. The content I have on my desktop viewer should carry through to the three other viewers, but one element is missing. It is a white line which I have imported in as a png. It shows on the desktop viewer but its missing in the three other viewers. Now when I try and replace it in the tablet viewer it carrys through to the mobile landscape & portrait viewer, but it also shows it in the desktop viewer. This is what I am confused about, as it states in the tutorial that if you design anything on any of the viewers it doesn’t migrate back towards the desktop viewer. Please advise!

Cheers


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

Hi @irishdesigner

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: Posting Guidelines for the Design Help Category - General - Forum | Webflow

Thanks in advance! :slight_smile:

1 Like

Hello :slight_smile:

I am just trying to figure out responsive web design. I have designed my website to suit the desktop viewer and now I am editing the other viewers. In doing this I am having trouble understanding why certain things are going missing, why artwork is being repeated where it shouldn’t be etc etc. Any other tutorials out there that you guys would recommend?

Many thanks!

Irish

How you tried this website? http://interactions.webflow.com It doesn’t have any tutorials but is still good for learning Webflow interactions. :grinning:

1 Like

Thank you! That’s very useful indeed :slight_smile: but in regards to responsive web design does anyone have any tips or tricks to make sure artwork migrates down all the way to the mobile app? Thank you.

Try using VW/VH/EM measurements at all times and in most cases the website will look good on desktop and even when cascading to iPhone. Be sure to ask if you need help with these measurements. :wink:

1 Like

Hi @irishdesigner are you able to give us some screenshots of what you’re talking about? Also, a read-only link would help as well.

Help us visualize the issue :smiley:

thanks in advance

1 Like

To be completely honest I really don’t understand VW/VH/EM :confused: Can you break it down in simple terms please?? I’m relatively new to Webflow and I am still very much in learning mode!

https://preview.webflow.com/preview/vrxstudiostest?preview=bea577c3ae94c52e51c6d670ce155d37


So as you can see the line disappears on the tablet viewer. I thought all artwork carried through to all of the other viewers after the desktop viewer? Then when I try and replace the line it duplicates on the desktop viewer! I know there must be a simple solution to this problem but I can’t seem to figure it out. Cheers :slight_smile:

Sure thing :wink:,
It’s actually very easy to learn all you have to remember is that it’s like percentage. Here’s a small chart below:
VW- this is width
VH- this is height
EM- this is used for text

1VW- 1% of width of monitor
1VH- 1% of height of monitor
1EM- a text size (automatically grows or shrinks to fit text on monitor)

It is very easy to use though you must understand one very important concept. This is not like percentage in Webflow, if you have a div that is 5vw and 5vh it will not be a perfect square, this is because most monitors now days are rectangles and the width does not exactly match the height. Rather to make a square you would have to do 5vw and 5vw (for height) and the same with VH. I suggest playing around with it for a couple of minutes to understand what I mean. If you are still confused don’t be afraid to ask. :grinning::wink::blush:

1 Like

@irishdesigner What are you using to get rid of the line? There are some effects that cascade in Webflow while there are some that do not. :wink:

No effects! It just disappears by itself. And I need to understand why this is happening before I continue editing the other viewers. Could the reason for this be because I haven’t used the VW/VH/EM method? I’m hoping not as I have already designed quite a few pages already! Oh dear… :frowning:

I don’t think it’s the VH/VW/EM method, it might be a bug. Let me think about other solutions right now to your problem. Thinking…

What type of measurements did you use on the line in desktop? %, px, auto? And is the line an image, div block, link block? :grinning:

It’s a .png that I generated in photoshop! The canvas size is 154W x 24H in px. And it’s an image within a container on webflow :slight_smile:

It’s gone because you have padding on the element, on tablet the padding left and right is more than the width. So you could use perecenateg padding instead.

I wouldn’t use a picture but a div, 1 px high, background white, width 25%, centre it, done!

success!
Tom

2 Likes

Great job @TomLamers .

1 Like

@irishdesigner Did Tom answer your question? :wink::grinning:

1 Like

Tom! You’re my hero :slight_smile: :slight_smile: :slight_smile: Thanks a million for taking the time to help me out. It worked perfectly! And thank you @VLADinSACRAMENTO for your help on this too. This forum is fantastic!

:sunflower:

1 Like

Yup, a great community, make sure to mark Tom’s reply as the solution as to let the rest of the Webflow community know that we have found the solution. :grinning::wink::blush::smile:

1 Like