Streaming live at 10am (PST)

Best Practices for Layout Width % vs PX?


#1

Hello World,

I’m currently trying to wrap by head around web layouts and becoming more fluent in webflow.

While attempting to recreate webflow’s flexbox page I noticed that div wrappers styled in % Width vs PX Width handle child elements differently.

Originally I styled the div container in % Width. Once published, the text alignment is off and overflowing.

If I switch the div containers width to PX, everything is in alignment & as styled once publish.

Can anyone help explain why this is so?

The only reason I choose % Width over a PX Width was because I heard somewhere along my journey of becoming a web designer that designing with % Width is better for responsive design.

Please Help!

Read-Only Site
https://preview.webflow.com/preview/re-flexbox-jcr-ba665b9bd2041a18ef4b9c85?preview=2a7931f2a34be69ee480c53db18cd404


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Hey @mcmlxxx8 and welcome!

I’ll start from the basics:
What’s the difference between setting width in % and in PX?

% - Percentages are a relative unit, which is defined by the size of the screen on which your website is being viewed. Example: If you set an element’s width to 50% it’s width and you view it on a screen that has a size of 1,920x1,080 PX it’s width will be rendered at 960 PX (That’s 50% of 1,920). Logically, if you view the website on a screen with a size of 1024x768 PX the element’s width will be rendered at 512px.

PX - Pixels are absolute units, which are not defined by the size of the screen on which your website is being viewed. An element with a width of 600px will render at that width no matter on what screen you are viewing it.

That’s the basic difference between the two. Now that you know that let’s continue.

When designing responsively it’s generally accepted that you should use %, because that way you can be mostly certain your elements will adapt to the screen their being viewed on. In comparison, if you design in PX you risk that your elements might look a bit weird on certain screens.

For example an element with a width of 1,140px won’t render properly on a smartphone screen which width is 1,080px. It will get cropped and won’t scale down to adapt to the screen.

In your particular case the difference in alignment comes from two factors:

  1. You’ve defined the element in %.
  2. While in the Design Editor you are viewing it at a lower screen width (because of Webflow’s UI around), whereas when you publish it you basically view it in full size. So you are technically seeing how your design looks on two different screen sizes.

There are a couple of things you can do if you really care about setting an exact size and alignment, without breaking alignment.

The easiest would be to define the width of the element in %, but also set a MAX width in PX. What this will do is that it will limit your element from going above the MAX width you’ve set for it, while still allowing it to adapt percentage wise when you view it on smaller screens.

Example scenario:
You set the element’s width to 70%.
You set its MAX width to 1,280 PX.

You open your website on a screen with a width of 1,366 PX. Your element will be rendered with a width of 956 PX, because that’s 70% of 1,366 PX.

You open your website on a screen with a width of 1,920 PX. Your element will be rendered with a width of 1,280 PX, because 70% of 1,920 PX is 1,344 PX and you have set a MAX width of your element at 1,280 PX.

This is a great little trick to ensure that your element will look the same above certain screen size. However, keep in mind that when designing responsively there’s no way your design looks the same on all screens. That’s why it is responsive. So the further you reduce the screen size, the more your design will change.

I hope that was helpful!


#3

But if you wanted a short answer to “why the alignment is off in this particular instance” then it is not because of your text but your images are the culprit. If you will make them take the full width of the column (uncheck “hidpi” in the image settings to see the effect; currently they are of a fixed width and will not scale larger than their size) it will look normal.

Cheers


#4

Great explanation @Alex_Tokmakchiev,

Flexbox is super hard to grasp in the beginning. And when using % with it, at first it appears not to work, but when you take a while, it’s start making sense. Different display settings come with different benefits, however, responsiveness using % versus PX, actually has no real difference when it comes to vertical Y axis.

Responsiveness will squeeze from east & west, not north & south - natively. Up and down can have effects, but %'s and pixels can be used together rather effectively for scaling if you set a px height, but set % for width, you can receive benefits. Of course, there are numerous ways to accomplish alignment, but I couldn’t say like you did. :smiley:

Your explanation was great!


#5

@Alex_Tokmakchiev Thanks for the GREAT explanation! You really spelled it out for me. That % + PX trick sounds like a winner. I’m going to try & start implementing it in my design.


#6

That was a fairly easy fix, Thanks! Any tips on narrowing down the “culprits” when you stuck in rut and completely lost?


#7

I have to say that practice makes perfect. This is true for spotting problems as well. Sometimes even before you start checking every piece of content for the wrong settings you can tell what is wrong. Always “inspect element” with developer tools in browsers to check its properties if you are not sure why this or that part of your design looks off. It is usually faster than browsing all and every layer in webflow, checking their settings.


#8

Thanks for the insight. I used the “inspect element” tactic for another site I was recreating that wasnt made with Webflow. Took a lot longer to complete but I learned a lot. Rinse & repeat.


#9

You are welcome. Have fun in Webflow. :slight_smile:


#10

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