Learn how to use the custom positioning units (px.%, VH, VW) with responsive behavior in mind.
You will learn:
✔︎ The difference between px, %, VH & VW
✔︎ How to properly use these values
✔︎ Best positioning practices for mobile responsive behavior
hi-oh zip from Elementor here today I’ll
talk about custom positioning and how it
relates to responsive behavior I’ll show
you how to use the custom width and
offsets units for absolute positioned
objects I’ll show you what each unit
represents and how it affects responsive
behavior on your website designs let’s
start off with working in the grid as
you can see everything is automatically
responsive and proportionate it has you
covered when we set an object to
absolute this changes working with
custom positioning is more tricky we
need to understand responsive behavior
in order to know what settings to change
to get the results we seek you can use
various combinations of settings with
your designs that will result in
different responsive behavior therefore
it’s important to understand the basics
first let’s start off in this section
here as you can see the main sections
content width is boxed and set to a
thousand pixels and the min height is
set to 100 VH V H stands for view height
and is a relative unit it relates to the
height of the viewport so setting it to
percent of the viewports height as you
can see setting it to fifty VH takes up
half of the viewports height this
applies for tablets and mobile as well
let’s go over to the pink cube I’ll
change the position to absolute and as
you can see the moment the cube is set
to absolute it is removed from the flow
of elements on the page so it doesn’t
take up any Heights in the column
anymore the image widgets width is
inherited from the column it’s in I’ll
go ahead and instead a custom width as
you can see the cube jump to the left
this is because the horizontal
orientation is set to left by default
you can check out a video explaining
this concept in a link in the
description below now let’s start with
the pixel unit as you can see it starts
small and when it reaches 290 pixels the
max size has been reached the width of
the image widget increases but the image
stays the same size as you can see when
we reach a thousand pixels it matches up
exactly with the thousand pixel content
width we set before I’ll go ahead and
set the width to 100 pixels
check out what happens with its size in
responsive tablet mode it remained the
same hundred pixels because the custom
width setting is default so it inherits
what we define for desktop as you can
see it’s still positioned at the top
left of the column the same goes for
mobile now let’s go back to desktop and
check out the other units I’ll go ahead
and delete the values and set it to
percent the image widget width is now in
relation to the column it’s in where a
hundred percent is the full width of the
column as you can see setting it to 50
percent takes up half of the column now
let’s check our tablet mode just like
before
it remained 50% because the setting is
default so it inherits what you define
for desktop now let’s check out VW V W
stands for view width the image widgets
width is now in relation to the
viewports width I’ll set the cube to 50
VW as you can see it isn’t 50% of the
column it’s in but 50% of the viewports
width you can see it better when I move
the cube to the left side of the
viewport I’ll duplicate the cube and
align it to the right they are both set
to 50 VW and together make up the entire
width of the viewport I’ll change the
right cube to 25 VW and duplicate it
align it up to the right and as you can
see the two right cubes make up the 50
VW together now that we understand the
custom width settings let’s check out
the horizontal and vertical offset units
first I’ll go ahead and delete the cubes
on the right for this example I set the
custom width of the remaining cube to
column this will make things a bit
easier to understand I’ll go ahead and
reset its position by setting the
offsets to zero the cubes orientations
are set to the top left of the column
making this its starting point as you
know the columns width is a thousand
pixels okay great let’s start with the
horizontal offset pixel unit as you can
see sliding the horizontal offset to 500
pixels positions the cube in the center
of the column setting it to a thousand
positions it at the end of the column
now let’s check out the vertical offset
the same concept applies
as you can see the columns height
appears to be a hundred and ten pixels
okay cool let’s reset to zero and check
out the percent unit it’s relative to
the column it’s in meaning that setting
it to 50% positions it in the middle of
the column and a hundred percent at the
end the same goes for the vertical
offset cool now let’s reset again and
change it to VW I’ll set it to 50 as you
can see the distance from the starting
point to the cube is exactly half of the
screens width the same goes for the
vertical offset I’ll set it to 25 VW as
you can see the distance from the top of
the column to the cube is exactly 1/4 of
the viewports width okay now for the VH
the view height a guy hadn’t set the
horizontal offset to 25 now the distance
from the starting point to the cube is
exactly 1/4 of the viewports height like
before the same goes for the vertical
offset as well okay great now that we
understand all the settings let’s reset
again and check out how they affect
responsive behavior I’ll go ahead and
set the cubes orientation to bottom and
right and I’ll move the cube outside the
column here is good now let’s check out
the responsive tablet mode wait what
just happened where did the cube go as
you can see the cube is just hiding on
the side this is because the cube always
stares at the same distance from the
right side of the column here’s an extra
tip for you elemental has a nifty
feature to hide the extra whitespace you
see here in the section settings and the
layout go ahead and set overflow to
hidden this property specifies whether
to clip contents or to add scroll bars
when an elements content is too big to
fit in a specified area in our case the
main section this doesn’t help us though
because now the cube is clipped as well
so I’ll go ahead and set it back to
default the most intuitive solution is
to just reposition it by changing its
offset values specifically for tablet
and mobile see how the whitespace
disappears but is this the best thing to
do what if some tablets have different
breaking
point I’ll show you what I mean let’s
update and preview the page for this
example I’ll go ahead and enter the
browser’s inspect responsive mode as you
can see the Cubist position on the right
side of the column I’ll start changing
its dimensions and as you can see the
cube still creates this whitespace when
I continue resizing the cube jumps to
the position are defined for responsive
tablet mode as you can see custom
positions for tablet and mobile
does work but it isn’t optimal
responsive behavior pay attention that
it also depends on your design and what
you want to achieve you could for
example just set the sections content
width to full and when you position the
cube at the distance you want it will
still be in the column this way it won’t
create the whitespace when resizing it’s
important to keep this in mind when
designing your page okay so in order to
know how we can improve responsive
behavior we need to understand the
possible settings so let’s go through
them and see how they affect our design
for this example I’ll use this dark
section over here the content width is
set to full and I’ve given it a minimum
height of 50 V W meaning its height will
take up half of the viewports width this
is a good way to design with responsive
behavior in mind I’ll go ahead and set
the column position to stretch this way
when we add custom positioned objects
they are inside the column and will make
it easier for us to work with I’ll drag
in an image widget this pink circle is
great I’ll give it a custom width
position to absolute and move it to the
middle of the column I’ll duplicate it
and choose this cool rocket I’ll resize
it and position it in the middle of the
circle first let’s go over the default
settings as you can see the custom width
and offsets are in pixels now let’s
check out the tablet mode as you can see
the images stay together because they
maintain the same size
the Rockets width for example in tablet
mode is set to default meaning it will
inherit the custom width we set for
desktop in pixels but they don’t stay in
the middle of the column the images move
to the right and down because they
maintained the same offset distance in
pixels from the left and top sides of
the column for the exact same reason the
images create white space like we saw
before when we’re in mobile mode we can
change the size and position to fit our
design for tablets but we will have the
same responsive behavior we saw with the
pink cube it’s not optimal perhaps using
a relative unit like percentage is
better because then they resize together
relative to the column they’re in so
first let’s delete the offset values in
tablet mode that will automatically set
when we drag the images to the middle
I’ll go ahead and delete the custom
width as well and set it back to default
so it’s inherited from the desktop
settings let’s go back to desktop mode
and check out the percentage unit first
I’ll reset the circle and rocket and set
it to percent
set their custom width and move them to
the center of the column okay let’s
check it out as you can see this works
well the circle and rocketry size
together and stay in the center of the
column the percentage unit is relative
to the column so if I would change the
sections content width to boxed things
will change as you can see the rocket
and circle start off in the center of
the column but the smaller the width
gets the more they separate and move
this is because the custom width and
offsets are relative to the column so
the width changes you see here directly
impact the size and position in order to
prevent this behavior I could use the V
W and V H units because they aren’t
relative to the column let’s set the
sections content width to a thousand
pixels and like before reset the circle
and rocket I’ll change the units to V W
and for this example I’ll place the
objects on the near top left corner of
the column I’ll set them to stick out of
the column a little like sir now let’s
check it out in tablet mode as you can
see the objects stay together and
slightly move to the right and down this
is because the thousand pixel content
width now takes up even more width in
tablet mode this change is even more
apparent in mobile mud this is because
the vertical and horizontal orientations
are set to left on top so changes in the
viewport width will directly affect the
position of the object in relation to
the top left side of the column I am
happy with this result because it
preserves the aspect ratio and this
inherent responsive behavior makes it
easier for me to adjust for mobile and
tablet now I have better responsive
control over my custom positioned
objects keep in mind that when using
custom positioning it’s best to start
from desktop mode and make the
responsive behavior optimal from the
outset this way you will have less work
making adjustments for mobile well
that’s it now you know how the custom
width and offset units work and have a
basic understanding of using them with
responsive behavior in mind don’t forget
to subscribe
to our YouTube channel for more tips and
tutorials see you later
