{"id":2247,"date":"2021-06-21T09:40:35","date_gmt":"2021-06-21T09:40:35","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=2247"},"modified":"2023-02-22T09:21:29","modified_gmt":"2023-02-22T09:21:29","slug":"how-to-use-custom-positioning-units-for-best-mobile-responsive-behavior","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-use-custom-positioning-units-for-best-mobile-responsive-behavior\/","title":{"rendered":"How to Use Custom Positioning Units For Best Mobile Responsive Behavior"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2247\" class=\"elementor elementor-2247\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5fdefc94 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5fdefc94\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-24800862\" data-id=\"24800862\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2c35a05a elementor-widget elementor-widget-video\" data-id=\"2c35a05a\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=x5mrXwfavU0&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5d82bfca elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5d82bfca\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4147ce11\" data-id=\"4147ce11\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-186d5c1d elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"186d5c1d\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-4091\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-4091\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-4092\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-4092\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-4091\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-4091\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-4091\" tabindex=\"0\" hidden=\"false\"><p>Learn how to use the custom positioning units (px.%, VH, VW) with responsive behavior in mind.<\/p><p>You will learn:<br \/>\u2714\ufe0e The difference between px, %, VH &amp; VW<br \/>\u2714\ufe0e How to properly use these values<br \/>\u2714\ufe0e Best positioning practices for mobile responsive behavior <\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-4092\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-4092\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-4092\" tabindex=\"0\" hidden=\"hidden\"><p>hi-oh zip from Elementor here today I&#8217;ll<br \/>talk about custom positioning and how it<br \/>relates to responsive behavior I&#8217;ll show<br \/>you how to use the custom width and<br \/>offsets units for absolute positioned<br \/>objects I&#8217;ll show you what each unit<br \/>represents and how it affects responsive<br \/>behavior on your website designs let&#8217;s<br \/>start off with working in the grid as<br \/>you can see everything is automatically<br \/>responsive and proportionate it has you<br \/>covered when we set an object to<br \/>absolute this changes working with<br \/>custom positioning is more tricky we<br \/>need to understand responsive behavior<br \/>in order to know what settings to change<br \/>to get the results we seek you can use<br \/>various combinations of settings with<br \/>your designs that will result in<br \/>different responsive behavior therefore<br \/>it&#8217;s important to understand the basics<br \/>first let&#8217;s start off in this section<br \/>here as you can see the main sections<br \/>content width is boxed and set to a<br \/>thousand pixels and the min height is<br \/>set to 100 VH V H stands for view height<br \/>and is a relative unit it relates to the<br \/>height of the viewport so setting it to<br \/>percent of the viewports height as you<br \/>can see setting it to fifty VH takes up<br \/>half of the viewports height this<br \/>applies for tablets and mobile as well<br \/>let&#8217;s go over to the pink cube I&#8217;ll<br \/>change the position to absolute and as<br \/>you can see the moment the cube is set<br \/>to absolute it is removed from the flow<br \/>of elements on the page so it doesn&#8217;t<br \/>take up any Heights in the column<br \/>anymore the image widgets width is<br \/>inherited from the column it&#8217;s in I&#8217;ll<br \/>go ahead and instead a custom width as<br \/>you can see the cube jump to the left<br \/>this is because the horizontal<br \/>orientation is set to left by default<br \/>you can check out a video explaining<br \/>this concept in a link in the<br \/>description below now let&#8217;s start with<br \/>the pixel unit as you can see it starts<br \/>small and when it reaches 290 pixels the<br \/>max size has been reached the width of<br \/>the image widget increases but the image<br \/>stays the same size as you can see when<br \/>we reach a thousand pixels it matches up<br \/>exactly with the thousand pixel content<br \/>width we set before I&#8217;ll go ahead and<br \/>set the width to 100 pixels<br \/>check out what happens with its size in<br \/>responsive tablet mode it remained the<br \/>same hundred pixels because the custom<br \/>width setting is default so it inherits<br \/>what we define for desktop as you can<br \/>see it&#8217;s still positioned at the top<br \/>left of the column the same goes for<br \/>mobile now let&#8217;s go back to desktop and<br \/>check out the other units I&#8217;ll go ahead<br \/>and delete the values and set it to<br \/>percent the image widget width is now in<br \/>relation to the column it&#8217;s in where a<br \/>hundred percent is the full width of the<br \/>column as you can see setting it to 50<br \/>percent takes up half of the column now<br \/>let&#8217;s check our tablet mode just like<br \/>before<br \/>it remained 50% because the setting is<br \/>default so it inherits what you define<br \/>for desktop now let&#8217;s check out VW V W<br \/>stands for view width the image widgets<br \/>width is now in relation to the<br \/>viewports width I&#8217;ll set the cube to 50<br \/>VW as you can see it isn&#8217;t 50% of the<br \/>column it&#8217;s in but 50% of the viewports<br \/>width you can see it better when I move<br \/>the cube to the left side of the<br \/>viewport I&#8217;ll duplicate the cube and<br \/>align it to the right they are both set<br \/>to 50 VW and together make up the entire<br \/>width of the viewport I&#8217;ll change the<br \/>right cube to 25 VW and duplicate it<br \/>align it up to the right and as you can<br \/>see the two right cubes make up the 50<br \/>VW together now that we understand the<br \/>custom width settings let&#8217;s check out<br \/>the horizontal and vertical offset units<br \/>first I&#8217;ll go ahead and delete the cubes<br \/>on the right for this example I set the<br \/>custom width of the remaining cube to<br \/>column this will make things a bit<br \/>easier to understand I&#8217;ll go ahead and<br \/>reset its position by setting the<br \/>offsets to zero the cubes orientations<br \/>are set to the top left of the column<br \/>making this its starting point as you<br \/>know the columns width is a thousand<br \/>pixels okay great let&#8217;s start with the<br \/>horizontal offset pixel unit as you can<br \/>see sliding the horizontal offset to 500<br \/>pixels positions the cube in the center<br \/>of the column setting it to a thousand<br \/>positions it at the end of the column<br \/>now let&#8217;s check out the vertical offset<br \/>the same concept applies<br \/>as you can see the columns height<br \/>appears to be a hundred and ten pixels<br \/>okay cool let&#8217;s reset to zero and check<br \/>out the percent unit it&#8217;s relative to<br \/>the column it&#8217;s in meaning that setting<br \/>it to 50% positions it in the middle of<br \/>the column and a hundred percent at the<br \/>end the same goes for the vertical<br \/>offset cool now let&#8217;s reset again and<br \/>change it to VW I&#8217;ll set it to 50 as you<br \/>can see the distance from the starting<br \/>point to the cube is exactly half of the<br \/>screens width the same goes for the<br \/>vertical offset I&#8217;ll set it to 25 VW as<br \/>you can see the distance from the top of<br \/>the column to the cube is exactly 1\/4 of<br \/>the viewports width okay now for the VH<br \/>the view height a guy hadn&#8217;t set the<br \/>horizontal offset to 25 now the distance<br \/>from the starting point to the cube is<br \/>exactly 1\/4 of the viewports height like<br \/>before the same goes for the vertical<br \/>offset as well okay great now that we<br \/>understand all the settings let&#8217;s reset<br \/>again and check out how they affect<br \/>responsive behavior I&#8217;ll go ahead and<br \/>set the cubes orientation to bottom and<br \/>right and I&#8217;ll move the cube outside the<br \/>column here is good now let&#8217;s check out<br \/>the responsive tablet mode wait what<br \/>just happened where did the cube go as<br \/>you can see the cube is just hiding on<br \/>the side this is because the cube always<br \/>stares at the same distance from the<br \/>right side of the column here&#8217;s an extra<br \/>tip for you elemental has a nifty<br \/>feature to hide the extra whitespace you<br \/>see here in the section settings and the<br \/>layout go ahead and set overflow to<br \/>hidden this property specifies whether<br \/>to clip contents or to add scroll bars<br \/>when an elements content is too big to<br \/>fit in a specified area in our case the<br \/>main section this doesn&#8217;t help us though<br \/>because now the cube is clipped as well<br \/>so I&#8217;ll go ahead and set it back to<br \/>default the most intuitive solution is<br \/>to just reposition it by changing its<br \/>offset values specifically for tablet<br \/>and mobile see how the whitespace<br \/>disappears but is this the best thing to<br \/>do what if some tablets have different<br \/>breaking<br \/>point I&#8217;ll show you what I mean let&#8217;s<br \/>update and preview the page for this<br \/>example I&#8217;ll go ahead and enter the<br \/>browser&#8217;s inspect responsive mode as you<br \/>can see the Cubist position on the right<br \/>side of the column I&#8217;ll start changing<br \/>its dimensions and as you can see the<br \/>cube still creates this whitespace when<br \/>I continue resizing the cube jumps to<br \/>the position are defined for responsive<br \/>tablet mode as you can see custom<br \/>positions for tablet and mobile<br \/>does work but it isn&#8217;t optimal<br \/>responsive behavior pay attention that<br \/>it also depends on your design and what<br \/>you want to achieve you could for<br \/>example just set the sections content<br \/>width to full and when you position the<br \/>cube at the distance you want it will<br \/>still be in the column this way it won&#8217;t<br \/>create the whitespace when resizing it&#8217;s<br \/>important to keep this in mind when<br \/>designing your page okay so in order to<br \/>know how we can improve responsive<br \/>behavior we need to understand the<br \/>possible settings so let&#8217;s go through<br \/>them and see how they affect our design<br \/>for this example I&#8217;ll use this dark<br \/>section over here the content width is<br \/>set to full and I&#8217;ve given it a minimum<br \/>height of 50 V W meaning its height will<br \/>take up half of the viewports width this<br \/>is a good way to design with responsive<br \/>behavior in mind I&#8217;ll go ahead and set<br \/>the column position to stretch this way<br \/>when we add custom positioned objects<br \/>they are inside the column and will make<br \/>it easier for us to work with I&#8217;ll drag<br \/>in an image widget this pink circle is<br \/>great I&#8217;ll give it a custom width<br \/>position to absolute and move it to the<br \/>middle of the column I&#8217;ll duplicate it<br \/>and choose this cool rocket I&#8217;ll resize<br \/>it and position it in the middle of the<br \/>circle first let&#8217;s go over the default<br \/>settings as you can see the custom width<br \/>and offsets are in pixels now let&#8217;s<br \/>check out the tablet mode as you can see<br \/>the images stay together because they<br \/>maintain the same size<br \/>the Rockets width for example in tablet<br \/>mode is set to default meaning it will<br \/>inherit the custom width we set for<br \/>desktop in pixels but they don&#8217;t stay in<br \/>the middle of the column the images move<br \/>to the right and down because they<br \/>maintained the same offset distance in<br \/>pixels from the left and top sides of<br \/>the column for the exact same reason the<br \/>images create white space like we saw<br \/>before when we&#8217;re in mobile mode we can<br \/>change the size and position to fit our<br \/>design for tablets but we will have the<br \/>same responsive behavior we saw with the<br \/>pink cube it&#8217;s not optimal perhaps using<br \/>a relative unit like percentage is<br \/>better because then they resize together<br \/>relative to the column they&#8217;re in so<br \/>first let&#8217;s delete the offset values in<br \/>tablet mode that will automatically set<br \/>when we drag the images to the middle<br \/>I&#8217;ll go ahead and delete the custom<br \/>width as well and set it back to default<br \/>so it&#8217;s inherited from the desktop<br \/>settings let&#8217;s go back to desktop mode<br \/>and check out the percentage unit first<br \/>I&#8217;ll reset the circle and rocket and set<br \/>it to percent<br \/>set their custom width and move them to<br \/>the center of the column okay let&#8217;s<br \/>check it out as you can see this works<br \/>well the circle and rocketry size<br \/>together and stay in the center of the<br \/>column the percentage unit is relative<br \/>to the column so if I would change the<br \/>sections content width to boxed things<br \/>will change as you can see the rocket<br \/>and circle start off in the center of<br \/>the column but the smaller the width<br \/>gets the more they separate and move<br \/>this is because the custom width and<br \/>offsets are relative to the column so<br \/>the width changes you see here directly<br \/>impact the size and position in order to<br \/>prevent this behavior I could use the V<br \/>W and V H units because they aren&#8217;t<br \/>relative to the column let&#8217;s set the<br \/>sections content width to a thousand<br \/>pixels and like before reset the circle<br \/>and rocket I&#8217;ll change the units to V W<br \/>and for this example I&#8217;ll place the<br \/>objects on the near top left corner of<br \/>the column I&#8217;ll set them to stick out of<br \/>the column a little like sir now let&#8217;s<br \/>check it out in tablet mode as you can<br \/>see the objects stay together and<br \/>slightly move to the right and down this<br \/>is because the thousand pixel content<br \/>width now takes up even more width in<br \/>tablet mode this change is even more<br \/>apparent in mobile mud this is because<br \/>the vertical and horizontal orientations<br \/>are set to left on top so changes in the<br \/>viewport width will directly affect the<br \/>position of the object in relation to<br \/>the top left side of the column I am<br \/>happy with this result because it<br \/>preserves the aspect ratio and this<br \/>inherent responsive behavior makes it<br \/>easier for me to adjust for mobile and<br \/>tablet now I have better responsive<br \/>control over my custom positioned<br \/>objects keep in mind that when using<br \/>custom positioning it&#8217;s best to start<br \/>from desktop mode and make the<br \/>responsive behavior optimal from the<br \/>outset this way you will have less work<br \/>making adjustments for mobile well<br \/>that&#8217;s it now you know how the custom<br \/>width and offset units work and have a<br \/>basic understanding of using them with<br \/>responsive behavior in mind don&#8217;t forget<br \/>to subscribe<br \/>to our YouTube channel for more tips and<br \/>tutorials see you later<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview Learn how to use the custom positioning units (px.%, VH, VW) with responsive behavior in mind. You will learn: \u2714\ufe0e The difference between px, %, VH &amp; VW \u2714\ufe0e How to properly use these values \u2714\ufe0e Best positioning practices for mobile responsive behavior Transcript hi-oh zip from Elementor here today I\u2019ll talk [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4109,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[41],"class_list":["post-2247","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-responsive","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Use Custom Positioning Units For Best Mobile Responsive Behavior - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/how-to-use-custom-positioning-units-for-best-mobile-responsive-behavior\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Custom Positioning Units For Best Mobile Responsive Behavior - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview Learn how to use the custom positioning units (px.%, VH, VW) with responsive behavior in mind. You will learn: \u2714\ufe0e The difference between px, %, VH &amp; VW \u2714\ufe0e How to properly use these values \u2714\ufe0e Best positioning practices for mobile responsive behavior Transcript hi-oh zip from Elementor here today I\u2019ll talk [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-use-custom-positioning-units-for-best-mobile-responsive-behavior\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-21T09:40:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T09:21:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Custom-Positioning-Responsive-Behavior-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1923\" \/>\n\t<meta property=\"og:image:height\" content=\"1081\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use Custom Positioning Units For Best Mobile Responsive Behavior - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/how-to-use-custom-positioning-units-for-best-mobile-responsive-behavior\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Custom Positioning Units For Best Mobile Responsive Behavior - Academy","og_description":"Overview Transcript Overview Learn how to use the custom positioning units (px.%, VH, VW) with responsive behavior in mind. You will learn: \u2714\ufe0e The difference between px, %, VH &amp; VW \u2714\ufe0e How to properly use these values \u2714\ufe0e Best positioning practices for mobile responsive behavior Transcript hi-oh zip from Elementor here today I\u2019ll talk [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-use-custom-positioning-units-for-best-mobile-responsive-behavior\/","og_site_name":"Academy","article_published_time":"2021-06-21T09:40:35+00:00","article_modified_time":"2023-02-22T09:21:29+00:00","og_image":[{"width":1923,"height":1081,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Custom-Positioning-Responsive-Behavior-1.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-use-custom-positioning-units-for-best-mobile-responsive-behavior\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-custom-positioning-units-for-best-mobile-responsive-behavior\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Use Custom Positioning Units For Best Mobile Responsive Behavior","datePublished":"2021-06-21T09:40:35+00:00","dateModified":"2023-02-22T09:21:29+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-custom-positioning-units-for-best-mobile-responsive-behavior\/"},"wordCount":2277,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-custom-positioning-units-for-best-mobile-responsive-behavior\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Custom-Positioning-Responsive-Behavior-1.jpg","keywords":["Guides and Tutorials"],"articleSection":["Responsive"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-use-custom-positioning-units-for-best-mobile-responsive-behavior\/","url":"https:\/\/elementor.com\/academy\/how-to-use-custom-positioning-units-for-best-mobile-responsive-behavior\/","name":"How to Use Custom Positioning Units For Best Mobile Responsive Behavior - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-custom-positioning-units-for-best-mobile-responsive-behavior\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-custom-positioning-units-for-best-mobile-responsive-behavior\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Custom-Positioning-Responsive-Behavior-1.jpg","datePublished":"2021-06-21T09:40:35+00:00","dateModified":"2023-02-22T09:21:29+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-custom-positioning-units-for-best-mobile-responsive-behavior\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-use-custom-positioning-units-for-best-mobile-responsive-behavior\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-use-custom-positioning-units-for-best-mobile-responsive-behavior\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Custom-Positioning-Responsive-Behavior-1.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Custom-Positioning-Responsive-Behavior-1.jpg","width":1923,"height":1081},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-use-custom-positioning-units-for-best-mobile-responsive-behavior\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Responsive","item":"https:\/\/elementor.com\/academy\/responsive\/"},{"@type":"ListItem","position":4,"name":"How to Use Custom Positioning Units For Best Mobile Responsive Behavior"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2247","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=2247"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2247\/revisions"}],"predecessor-version":[{"id":9499,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2247\/revisions\/9499"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4109"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=2247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=2247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=2247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}