Streaming live at 10am (PST)

Clarifying about Responsive design


#1

Don’t you have to set PX for the parent Div block, and all the stuff within goes to %?
Then, the parent element is too large for other devices, so you need to change the pixel size for the parent element on other devices…. While the stuff within just re-formatts itself (since the elements within are set to %).


#2

You don't need to set px for parent elements. An 80% parent element will take up 80% of the screen.

What I like to do is set a max-width in px for outer most div. This way you can control how wide your design will be on large screens. If you are using the container element then you don't have to worry about it.


#3
  1. Does this method apply to Symbols, as well?
    Please enter my website and try your method with my symbol.
    When it was set to "40%" height, for example, the parent element had no height!
    Because the parent had no height, all of the content within (which had % height) dissapeared.

Please refer to the attached images.

Question 2: (If you have time, this isnt as important)
The max-width concept seems wise... can you explain it deeper? Perhaps give a direct example...
Here is me trying.

--> You have a container that takes up 80% of the screen. If a person is using a really wide computer used for architecture, then that container would be really big when it formats for their screen.

The elements inside the container, such as writing, would get really big, too. So the whole website might look too big? That doesnt seem right. Since the whole website is designed with %, then each part would size UP appropriately for the bigger computer screen. So everything would be proportional.


#4

What you portray does not act as a parent element. This is because the items inside of your "parent element" are on absolute positioning.

Hope this helps. :wink:


#5

What positioning must they have for the parent element, to be a parent element? :slight_smile:

(This is a key answer you give)


#6

The default setting.

Here's how I think of it and hopefully this will make more sense to you.

Here's how I see it, like Lego's, you stack the elements, just backwards ... From the top down. Therefore, you should go section > container > columns.

Here's what you are currently doing. Rather than stacking the pieces vertically, putting them all on absolute makes then all be right next to each other side by side ... And then to have them look nice you lower each one to its own level, but if you don't stack them, they all fall, as a result you tape them so they could all stay where they are ... And get a huge disorganization.

That's how I look at it, if you want I can provide a visual later so you can understand my analogy to websites to Lego's.

Hope this explains a bit more to you. :sunglasses:

Also: it's a good idea to watch the full website tutorials on Webflow, it might take some time, but in the long run, it will save a ton of time. :wink:


#7

That make sense. Ill save that example for the 'core notes' to which i now reference as i build the site anew, from scratch.


#8

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