{"id":4520,"date":"2021-07-20T06:26:36","date_gmt":"2021-07-20T06:26:36","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=4520"},"modified":"2023-02-21T10:27:53","modified_gmt":"2023-02-21T10:27:53","slug":"responsive-collection","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/responsive-collection\/","title":{"rendered":"Responsive Collection"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"4520\" class=\"elementor elementor-4520\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-541b7ad elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"541b7ad\" 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-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c96259d\" data-id=\"c96259d\" 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-5e8820c elementor-layout-start e-tabs-view-vertical elementor-widget elementor-widget-video-playlist\" data-id=\"5e8820c\" data-element_type=\"widget\" data-settings=\"{&quot;playlist_title&quot;:&quot;Responsive Collection&quot;,&quot;tabs&quot;:[{&quot;title&quot;:&quot;Elementor Responsive 101: All You Need to Know!&quot;,&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/EqFxeluk4U4&quot;,&quot;duration&quot;:&quot;13:56&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;http:\\\/\\\/img.youtube.com\\\/vi\\\/EqFxeluk4U4\\\/maxresdefault.jpg&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;_id&quot;:&quot;040e7e7&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;\\ud83d\\udc4b\\ud83c\\udffc\\u00a0 Help us improve by answering this short survey:&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/redirect?event=video_description&amp;redir_token=QUFFLUhqbEhtcm1mZzM3Z1lBZm1JVkg4ZHB4M3lla1ZlZ3xBQ3Jtc0tsT1VuSDZhVWM4dDVQY1BWVWpmMkJvUFZhOGU4Ym1XNEpzNE9ZT2NaTEFJVi1VQk9JQ3BPSDJwZDhfblhKQ20tczV3WGtyaXJPQnJqQWRVS2RRY2ZhREFRd1RZRlpuWDRMVGZoWEpPekdVeUpKamZ6QQ&amp;q=http%3A%2F%2Felemn.to%2Fsurvey-time\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;http:\\\/\\\/elemn.to\\\/survey-time&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;br \\\/&gt;&lt;br \\\/&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;In this tutorial, we will go over the responsive features and options in Elementor. We\\u2019ll review the basics of responsive design, and optimize a website\\u2019s header, content, and footer, using Elementor&#039;s responsive section, column, and widget settings.&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;This tutorial will cover:&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;\\u2714\\ufe0e Responsive features&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;\\u2714\\ufe0e Responsive menu&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;\\u2714\\ufe0e Responsive font styles&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;\\u2714\\ufe0e Device-specific settings&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;\\u2714\\ufe0e And much more!&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Don\\u2019t forget to subscribe to our channel!&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Get Elementor:&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/redirect?event=video_description&amp;redir_token=QUFFLUhqbmpwRlFtMlhlUkRvdlBNTTZXVHV4UmlNVnktQXxBQ3Jtc0tuWVRwTUJISHFiMXVlWEN6TDY1R3pvaEZneFRfWDdaNS1kaEFRTTZNeE1LLW5DVDdYVFA0elpDZzRrWks1NWFGd3lSN3VqZEhmUTNpb2FsWktSRHpsdnRUWXNkQk11UDBzR3RxY3VVTXNjUUp4VzVmYw&amp;q=https%3A%2F%2Felementor.com%2F\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;https:\\\/\\\/elementor.com\\\/&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Get Elementor Pro:&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/redirect?event=video_description&amp;redir_token=QUFFLUhqbWZOenJTYjVIUGRITHhwajdaX2ZKdWtwOTEzUXxBQ3Jtc0ttUktTRGEyYl9pWWNjcjZUdDZSbU1PMXZ2MDlNX2ZFckhvRzhLVmxxT1labnM2ZUo1ak5ldllGT1FySVJ2eFV4b0h2aVlRR1Jhd1NlV1hoMXpRVDZxLXNUWmJIYzZGdm5ER3BYZXNfejh6cnpYWGhOWQ&amp;q=https%3A%2F%2Felementor.com%2Fpro%2F\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;https:\\\/\\\/elementor.com\\\/pro\\\/&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=EqFxeluk4U4&amp;t=0s\\&quot;&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;00:00&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; -&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=EqFxeluk4U4&amp;t=61s\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;01:01&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; - Intro - What We\\u2019ll See in this Tutorial&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=EqFxeluk4U4&amp;t=62s\\&quot;&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;01:02&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; -&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=EqFxeluk4U4&amp;t=248s\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;04:08&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; - Elementor\\u2019s Responsive Features&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=EqFxeluk4U4&amp;t=249s\\&quot;&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;04:09&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; -&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=EqFxeluk4U4&amp;t=359s\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;05:59&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; - Responsive Menu&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=EqFxeluk4U4&amp;t=360s\\&quot;&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;06:00&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; -&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=EqFxeluk4U4&amp;t=467s\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;07:47&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; - Column Width &amp; Wrapping&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=EqFxeluk4U4&amp;t=468s\\&quot;&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;07:48&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; -&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=EqFxeluk4U4&amp;t=528s\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;08:48&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; - Responsive Font Styles&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=EqFxeluk4U4&amp;t=529s\\&quot;&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;08:49&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; -&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=EqFxeluk4U4&amp;t=574s\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;09:34&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; - Hide and Show Elements on Different Devices&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=EqFxeluk4U4&amp;t=575s\\&quot;&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;09:35&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; -&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=EqFxeluk4U4&amp;t=608s\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;10:08&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; - Reverse Column Order in Different Viewports&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=EqFxeluk4U4&amp;t=609s\\&quot;&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;10:09&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; -&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=EqFxeluk4U4&amp;t=684s\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;11:24&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; - Hide &amp; Show Elements - Best Practice&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=EqFxeluk4U4&amp;t=685s\\&quot;&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;11:25&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; -&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=EqFxeluk4U4&amp;t=732s\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;12:12&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; - Responsive Widget Options&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=EqFxeluk4U4&amp;t=733s\\&quot;&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;12:13&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; -&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=EqFxeluk4U4&amp;t=836s\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;13:56&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; - Recap - What We Learned in this Tutorial&lt;\\\/span&gt;&lt;\\\/p&gt;&quot;,&quot;type&quot;:&quot;youtube&quot;,&quot;vimeo_url&quot;:null,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;,&quot;inner_tab_content_2&quot;:&quot;&quot;},{&quot;_id&quot;:&quot;afb34ee&quot;,&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/U9dMTkBgsjg&quot;,&quot;title&quot;:&quot;How to Hide Columns Per Device&quot;,&quot;duration&quot;:&quot;1:11&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;In this tutorial, we&#039;ll go over how to hide a column in Elementor 2.5.&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;\\u00a0&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Learn More:&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/redirect?event=video_description&amp;redir_token=QUFFLUhqbklHdVV1UDR3UUowRFg3RWpJcENobnpvSVZNUXxBQ3Jtc0trTDJveWg2U29qMEdILVB4eUNldEVuN00xb2laMWloZHJhNG9YeGFsWUpfWk9uLW5aZkNqd1V4SFlxZE1QTzR6S0FnLVZEVHYxSG9EeXJhYXBVREJNREdha1h5WHF3MkJ5TTZZMXpGMm9neHlWMmdnOA&amp;q=https%3A%2F%2Felementor.com%2Fblog%2Fintroducing-flexible-layout%2F\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;https:\\\/\\\/elementor.com\\\/blog\\\/introducin...&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Get Elementor Pro:&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/redirect?event=video_description&amp;redir_token=QUFFLUhqbXVRcGdXNHlSUmc1RlR3STdoWlVqdTNoOWctQXxBQ3Jtc0tuRnhfR3ExX2tFU2NNcjhEdmhfalpVX0o5dUE4Vk5PUGZEaG9LMzk2OElYNC1JaEJNYmJrVnlpenVHZnAtZ2xCZmNGQWNqaXVxYUtxSVRVUDgydFp1WjVPbGJ4cW9hNFZKR0RQSDk5dG5CSld5MHNBMA&amp;q=https%3A%2F%2Felementor.com%2Fpro%2F\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;https:\\\/\\\/elementor.com\\\/pro\\\/&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;\\\/p&gt;&quot;,&quot;type&quot;:&quot;youtube&quot;,&quot;vimeo_url&quot;:null,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;,&quot;inner_tab_content_2&quot;:&quot;&quot;},{&quot;_id&quot;:&quot;4071833&quot;,&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/QfjI0ILFUVA&quot;,&quot;title&quot;:&quot;Solving Responsive Web Design Challenges - Monday Masterclass&quot;,&quot;duration&quot;:&quot;9:17&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;In this tutorial, we examine several responsive web design challenges and explore various ways to solve them elegantly using Elementor.&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;\\u00a0&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Tip #1. Responsive Design Begins and Ends With Correct Planning.&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;In this business, no one in their right mind would set off on a project without a plan, a draft or sketch. The more forethought and planning you can invest in the design process, the better you will be able to anticipate the technical problems and adjust your ideas accordingly.\\u00a0&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;\\u00a0&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Tip #2. Positioning Elements for Mobile Responsive View&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;When it comes to correctly positioning sections for mobile responsive view, we suggest avoiding setting values in pixels. Setting values in percent (%) or in EM keeps them relative to the overall screen size. Thanks to the responsive mode, we were able to conclude that we should set the padding to 17% either side of the text widget, in our next example, so that we get similar positioning in both desktop and mobile view.&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;\\u00a0&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Tip #3. Responsive Design: A Horizontal Approach&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Traditionally, web design is a vertical process, which is why many designers prefer to complete the design of the entire page for a single device before, trying to make the same design work as well on the next device. An easier way to go about this is to design our views horizontally, one section at a time, across all our devices as we go along.\\u00a0&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;\\u00a0&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Once we have made sure that section looking the way we want it to in Desktop, Tablet, and Mobile views, we can move on to the next. Where possible, duplicate sections, columns or widgets, and update the relevant content; re-use them as foundations to build the other similar elements on the page.&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;\\u00a0&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Tip #4. Change \\\/ Position Background Image&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Certain background images, like that of the example below, may look great in the desktop view. However, it doesn\\u2019t take much experience to see how it wouldn\\u2019t work well when viewing the site on a mobile screen.&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;\\u00a0&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Tip #5. Create Alternative Section&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;As promised, we are only too happy to share our experience and insight with our community, who will no doubt be familiar with our next example. Well within the top area of our home page, we needed to come up with a solution to the 3-column text section. Rather than having this appear as 3 boring rows of text in Mobile view, we decided to create an alternative section, with the text inside a slider widget.&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;\\u00a0&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Read the full post:&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/redirect?event=video_description&amp;redir_token=QUFFLUhqazJocXpFSThaVTJ0RU96Nkp3XzRobUdDSVdyUXxBQ3Jtc0tuX3lNTlVNT1E2bjVMb0pZLUNuMlRBb1lpRWs2MW1nUXByakRzTU5kOU1QV2tvZXptWWpjLUptTkRrcTlBRlB0TXZOeW1yYklKNTMwc1BBcGpXSktzWWw2alpjVXpKWGR2WnBTNmdKM1hxNDRiM0RkQQ&amp;q=https%3A%2F%2Felementor.com%2Fblog%2Fresponsive-web-design%2F\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;https:\\\/\\\/elementor.com\\\/blog\\\/responsive...&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Get Elementor:&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/redirect?event=video_description&amp;redir_token=QUFFLUhqbUY3SGkteF9aazBBLWtJV0xuMVF6cGNJUVlMd3xBQ3Jtc0tuQTJOMFpGbnBWREFKd2xWVW9XUXZNUTFTVDJCazg5d19DWHQ2NWd3aWtLNklIZW9QbFVES3ZOaWNmYUw0R3Znb3pWREN3VmF0UTNXdVpJek5lWmlNcmxEMXpseUh1aVZieGtBQnQyVnZIWV81cjRnSQ&amp;q=https%3A%2F%2Felementor.com\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;https:\\\/\\\/elementor.com&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Get Elementor Pro:&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/redirect?event=video_description&amp;redir_token=QUFFLUhqbVBZcFVZODlxZ2NQczlsaW5UNUNmS0Vicm5sQXxBQ3Jtc0tsdXlSclBVb3FvVWJzQ2lVek53WlFISjVlWXBfMWNZRHRGRVhUZE81LW9lcTdvNkFLWGRzRTBEWk5DeDZybk8xTmhjdUUxX3g3ZzhNS3NucWhpREREUnhHb3RwbS14eUhMTmFDV3c3X0tzWjdzOFI4TQ&amp;q=https%3A%2F%2Felementor.com%2Fpro%2F\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;https:\\\/\\\/elementor.com\\\/pro\\\/&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;\\\/p&gt;&quot;,&quot;type&quot;:&quot;youtube&quot;,&quot;vimeo_url&quot;:null,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;,&quot;inner_tab_content_2&quot;:&quot;&quot;},{&quot;_id&quot;:&quot;2b6e603&quot;,&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/DilH5rvTiS0&quot;,&quot;title&quot;:&quot;Making Your Sites Tablet and Mobile Friendly&quot;,&quot;duration&quot;:&quot;36:00&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Join Ziv Geurts, Designer &amp; Elementor\\u2019s Lead Educator, for a step-by-step walkthrough on how to use Elementor\\u2019s responsive settings to make sure your sites look great on tablet and mobile devices. The demo site is built with Elementor Pro, but the webinar will cover many topics relevant to all users.&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;\\u00a0&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;6 Takeaways:&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;\\u2713 Optimize and style navbar hamburger menus for tablet and mobile [PRO]&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;\\u2713 Use Elementor\\u2019s responsive settings to create device specific designs&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;\\u2713 Control column width and alignment per device&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;\\u2713 Use relative units that scale better on devices, such as EM and %&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;\\u2713 Optimize your Global Fonts for different viewports&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;\\u2713 Manage Motion Effects for tablet and mobile devices [PRO]&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;\\u00a0&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Links mentioned in the Webinar:&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;ol&gt;&lt;li&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; How to Use Column Alignment:&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=htUvG2Y5vaY&amp;t=0s\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;https:\\\/\\\/youtu.be\\\/htUvG2Y5vaY&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;\\\/li&gt;&lt;li&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; How to Use Motion Effects Viewport Settings:&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=0pjPb8orwXM&amp;t=0s\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;https:\\\/\\\/youtu.be\\\/0pjPb8orwXM&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;\\\/li&gt;&lt;li&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; Global Colors &amp; Fonts Webinar:&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=OvETB43I7_w&amp;t=0s\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;https:\\\/\\\/youtu.be\\\/OvETB43I7_w&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;\\\/li&gt;&lt;\\\/ol&gt;&lt;p&gt;\\u00a0&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Don\\u2019t forget to subscribe to our channel!&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Get Elementor:&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/redirect?event=video_description&amp;redir_token=QUFFLUhqbl9NNFpBVkxEWDNlSTJ6Y1dJZ0JWVEpvOHpEUXxBQ3Jtc0ttek1iaHlEbW85VUVpYThUc2t6VjdTanhaLXRzeTg4dE5Udmo4eU5iNGVpNmpERzNMUkdnXy1GSzdfX3ZNNUg4eFdQSkN1a04xbnY4T2xIWXhacERXYkM1aVdRbEw1Tm5vN0hlRU5JV3dDQWJIRjNsRQ&amp;q=https%3A%2F%2Felementor.com%2F%E2%80%8B\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;https:\\\/\\\/elementor.com\\\/\\u200b&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Get Pro:&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/redirect?event=video_description&amp;redir_token=QUFFLUhqbmFLaHhTRU4zZ2MxNGdid2pxUmNKdi1odmZzQXxBQ3Jtc0tudDEwMllOUGJLRjB2YmFCT2JIc2tYTUlmeVlPbUZBZFJKekgyd1lIWEM3QW5Db05ZNVR4NTNKR3EyeDdmTWEzdFZNeFFTWnltQzQ1ZzNpTi1BNmV5MTFtZ0pUSVRSaFdQalZESEZkTWNjTDVJMHdMQQ&amp;q=https%3A%2F%2Felementor.com%2Fpro\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;https:\\\/\\\/elementor.com\\\/pro&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;\\\/p&gt;&lt;p&gt;\\u00a0&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;TIMESTAMPS:&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=DilH5rvTiS0&amp;t=0s\\&quot;&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;00:00&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; Introduction\\u00a0&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=DilH5rvTiS0&amp;t=112s\\&quot;&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;01:52&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; Site overview on tablet &amp; mobile devices&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=DilH5rvTiS0&amp;t=210s\\&quot;&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;03:30&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; Optimize &amp; style the navbar hamburger menu for tablet and mobile&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=DilH5rvTiS0&amp;t=411s\\&quot;&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;06:51&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; Tweak the header for mobile, device icons &amp; alignment\\u00a0&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=DilH5rvTiS0&amp;t=570s\\&quot;&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;09:30&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; Create device specific layouts using column width &amp; responsive visibility&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=DilH5rvTiS0&amp;t=770s\\&quot;&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;12:50&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; Optimize your global fonts for different viewports, understand default behavior &amp; use EM to save time&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=DilH5rvTiS0&amp;t=1108s\\&quot;&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;18:28&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; Build a simple 2 column, text and image design &amp; apply motion effects with mobile in mind&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=DilH5rvTiS0&amp;t=1468s\\&quot;&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;24:28&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; Tweak your buttons per device &amp; understand the impact of changing values with settings that don\\u2019t have device icons&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=DilH5rvTiS0&amp;t=1564s\\&quot;&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;26:04&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; PX vs. % use relative units that scale better on devices&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=DilH5rvTiS0&amp;t=1657s\\&quot;&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;27:37&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; Applying Elementor\\u2019s responsive settings to create a custom footer layout for tablet and mobile&lt;\\\/span&gt;&lt;\\\/p&gt;&quot;,&quot;type&quot;:&quot;youtube&quot;,&quot;vimeo_url&quot;:null,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;,&quot;inner_tab_content_2&quot;:&quot;&quot;},{&quot;_id&quot;:&quot;8bf2b49&quot;,&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/GlwuG8DAaDA&quot;,&quot;title&quot;:&quot;Create Responsive Image Hotspots [Advanced Tutorial]&quot;,&quot;duration&quot;:&quot;10:31&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;In this Tips &amp; Tricks Tutorial, we learn how to create responsive-friendly Image Hotspots entirely with Elementor. Adding a layer of playful UX is a great way to increase website conversion rates and really make them stand out!&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;We use Elementor\\u2019s Image and Flip Box widgets to build this effect while going over the fundamentals of absolute positioning.&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;\\u00a0&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;This tutorial will cover:&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;\\u2714\\ufe0e How to create and use Image Hotspots&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;\\u2714\\ufe0e Understand the Image and Flip Box widgets&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;\\u2714\\ufe0e Absolute positioning&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;\\u2714\\ufe0e Responsiveness with Absolute positioning&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;\\u2714\\ufe0e Column Alignment&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;\\u2714\\ufe0e And more!&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;\\u00a0&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Don\\u2019t forget to subscribe to our channel!&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;\\u00a0&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Get Elementor:&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/redirect?event=video_description&amp;redir_token=QUFFLUhqbU4yTUMzSzFKbkNpRVpRQkZSa3JHYlZjSTZuUXxBQ3Jtc0tubndtX2VUcUdUdXNGTzBnSEk3SU5RSnhrdGowV3N0bjN3VVdEMHp5ejJDSV9sVU5LWm9EMnVRX3QtSDBYSVRWSFBSWERoYThXdFNDODFqTTVqZ1RfbkZUaXp5QVZuZ1kwNWdkWjBySm9kQXlucnJCOA&amp;q=https%3A%2F%2Felementor.com%2F\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;https:\\\/\\\/elementor.com\\\/&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Get Pro:&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/redirect?event=video_description&amp;redir_token=QUFFLUhqbkNmYWZvd0RkY0V4cFc0bzU3ZjFzSldodE5VUXxBQ3Jtc0ttUzN6ZGVqYzBCTkN6eTcyX1dSNE1CNWtYLU5QVTExbmJLS1JlX3hxM1BYeVFtenZsZEtmOEJPOGlaWG9TYVJ5V3VDcDhjTm9wUlVySnlwa0x4cWEwRkpCR3JxMFVJTHhzR25zUXFLTFZ0dEN4bWJ2VQ&amp;q=https%3A%2F%2Felementor.com%2Fpro\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;https:\\\/\\\/elementor.com\\\/pro&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;\\\/p&gt;&lt;p&gt;\\u00a0&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Check out these tutorials to learn more about custom positioning:&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;ol&gt;&lt;li&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; How to Use Absolute &amp; Fixed Custom Positioning in Elementor:&lt;\\\/span&gt;&lt;\\\/li&gt;&lt;\\\/ol&gt;&lt;p&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=vJ851SD-6u0&amp;t=0s\\&quot;&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;https:\\\/\\\/youtu.be\\\/vJ851SD-6u0&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;\\\/p&gt;&lt;ol start=\\&quot;2\\&quot;&gt;&lt;li&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; Do\\u2019s &amp; Don\\u2019ts: Absolute &amp; Fixed Position in Elementor:&lt;\\\/span&gt;&lt;\\\/li&gt;&lt;\\\/ol&gt;&lt;p&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=RA0T52VB2Os&amp;t=0s\\&quot;&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;https:\\\/\\\/youtu.be\\\/RA0T52VB2Os&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;\\\/p&gt;&lt;ol start=\\&quot;3\\&quot;&gt;&lt;li&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt; How to Use Custom Positioning Units For Best Mobile Responsive Behavior:&lt;\\\/span&gt;&lt;\\\/li&gt;&lt;\\\/ol&gt;&lt;p&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=x5mrXwfavU0&amp;t=0s\\&quot;&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;https:\\\/\\\/youtu.be\\\/x5mrXwfavU0&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;\\\/p&gt;&lt;p&gt;\\u00a0&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Note: This is an advanced tutorial, if you are facing difficulties keeping your flip-box icon responsive, try setting it to the top left corner by following these steps:&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Click your flip-box widget and in the Style tab, set the Alignment to left and Vertical Alignment to Top&lt;\\\/span&gt;&lt;\\\/p&gt;&quot;,&quot;type&quot;:&quot;youtube&quot;,&quot;vimeo_url&quot;:null,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;,&quot;inner_tab_content_2&quot;:&quot;&quot;},{&quot;_id&quot;:&quot;757762d&quot;,&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/x5mrXwfavU0&quot;,&quot;title&quot;:&quot;How to Use Custom Positioning Units For Best Mobile Responsive Behavior&quot;,&quot;duration&quot;:&quot;12:26&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Learn how to use the custom positioning units (px.%, VH, VW) with responsive behavior in mind.&lt;br \\\/&gt;&lt;\\\/span&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;You will learn:&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;\\u2714\\ufe0e The difference between px, %, VH &amp; VW&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;\\u2714\\ufe0e How to properly use these values&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;\\u2714\\ufe0e Best positioning practices for mobile responsive behavior\\u00a0&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;\\u00a0&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Learn more about custom positioning here:&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=RA0T52VB2Os&amp;t=0s\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;https:\\\/\\\/www.youtube.com\\\/watch?v=RA0T5...&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;\\\/p&gt;&lt;p&gt;\\u00a0&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Learn More:&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/redirect?event=video_description&amp;redir_token=QUFFLUhqbUJMQzRSNDluNEJrQUdUaEdUNzg3U3ZTT0haQXxBQ3Jtc0ttVWw0VFg0V19hZ2hqc25HcjhnWGwtdVlEeGcyb3Q0Z3BlZzRPbGdNTk9hSWtnUUxpNGRYdnl6ZG94cm5FRUF3QWIzT0EwZTlxU1ZnS1lQdmtHcUxXcWFPMi1FLXBpb29oZFVQZlhZeXFZckgzWFo3TQ&amp;q=https%3A%2F%2Felementor.com%2Fblog%2Fintroducing-flexible-layout%2F\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;https:\\\/\\\/elementor.com\\\/blog\\\/introducin...&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;Get Elementor Pro:&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/redirect?event=video_description&amp;redir_token=QUFFLUhqblA3RGVhX3JGeDBfSmNoTmFhc0ctSW9pc251UXxBQ3Jtc0ttUWZfUzR6bWUtMmdGUnBJRHdRN0daRWItLUtoZWNQZDlIVkxGcjk4bGNWcDNnU1RvTy15UVltdllvUElEUGhjYzZkdVREYTU4ZDUxWlk1YVRTVFY2SzRxeDU4ckR1VHRzQzUtZUNBdkVwUjNic3VBVQ&amp;q=https%3A%2F%2Felementor.com%2Fpro%2F\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;https:\\\/\\\/elementor.com\\\/pro\\\/&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;\\\/p&gt;&quot;,&quot;type&quot;:&quot;youtube&quot;,&quot;vimeo_url&quot;:null,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;,&quot;inner_tab_content_2&quot;:&quot;&quot;},{&quot;_id&quot;:&quot;767f4ef&quot;,&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/eDeeemyla9k&quot;,&quot;title&quot;:&quot;How to Make a Responsive Page - Side By Side Columns&quot;,&quot;duration&quot;:&quot;1:21&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;In this video, you will learn how to align columns side by side on WordPress pages viewed on mobile devices. By changing each column width in Elementor, you can easily align two or more column horizontally.&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;\\u00a0&lt;\\\/p&gt;&lt;p&gt;&lt;span style=\\&quot;font-weight: 400\\&quot;&gt;For more tutorials, check out our&lt;\\\/span&gt;&lt;a href=\\&quot;https:\\\/\\\/www.youtube.com\\\/redirect?event=video_description&amp;redir_token=QUFFLUhqbGNwZ1BEWFlWeFE4WkFQSlZYMXVHTjVrSmxOUXxBQ3Jtc0trd2E4V3Bpc3V5a0hqb1hteXNhdk9RTEdGYnlJX0p6WjJJT3o0Z2hWUTZTLVJjRTVENzFnNzZXTDlTaVJrZEFXajVFQXBnc2s0bWtWbjJ1V1RTTFd3T1NITVdndk1RUzh3bXlrZ0l3djdlb0hLVG1FMA&amp;q=https%3A%2F%2Fdocs.elementor.com\\&quot;&gt; &lt;span style=\\&quot;font-weight: 400\\&quot;&gt;https:\\\/\\\/docs.elementor.com&lt;\\\/span&gt;&lt;\\\/a&gt;&lt;\\\/p&gt;&quot;,&quot;type&quot;:&quot;youtube&quot;,&quot;vimeo_url&quot;:null,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;,&quot;inner_tab_content_2&quot;:&quot;&quot;}],&quot;inner_tab_title_1&quot;:&quot;Overview&quot;,&quot;inner_tab_title_2&quot;:&quot;Transcript&quot;,&quot;inner_tab_is_content_collapsible&quot;:&quot;collapsible&quot;,&quot;inner_tab_collapsible_height&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;139&quot;,&quot;sizes&quot;:[]},&quot;autoplay_next&quot;:&quot;yes&quot;,&quot;show_watched_indication&quot;:&quot;yes&quot;,&quot;autoplay_on_load&quot;:&quot;yes&quot;,&quot;inner_tab_collapsible_height_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;inner_tab_collapsible_height_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"video-playlist.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n\t\t<div class=\"e-tabs\" role=\"region\" aria-labelledby=\"e-playlist-5e8820c\">\n\t\t\t<div class=\"e-tabs-main-area\">\n\t\t\t\t<div class=\"e-tabs-wrapper\">\n\t\t\t\t\t<div class=\"e-tabs-header\">\n\t\t\t\t\t\t<h2 class=\"e-tabs-title\" id=\"e-playlist-5e8820c\">Responsive Collection<\/h2>\n\t\t\t\t\t\t<div class=\"e-tabs-header-right-side\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tabs-videos-count\">7 Videos<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-tabs-toggle-videos-display-button rotate-down e-font-icon-svg e-eicon-caret-down\" viewBox=\"0 0 571.4 571.4\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M571 393Q571 407 561 418L311 668Q300 679 286 679T261 668L11 418Q0 407 0 393T11 368 36 357H536Q550 357 561 368T571 393Z\"><\/path><\/svg>\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"e-tabs-items-wrapper\">\n\t\t\t\t\t\t<div class=\"e-tabs-items\" role=\"tablist\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-title-9911\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"e-tab-content-9911\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">Elementor Responsive 101: All You Need to Know!<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">13:56<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-title-9912\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-tab-content-9912\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">How to Hide Columns Per Device<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">1:11<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-title-9913\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"false\" data-tab=\"3\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-tab-content-9913\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">Solving Responsive Web Design Challenges - Monday Masterclass<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">9:17<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-title-9914\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"false\" data-tab=\"4\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-tab-content-9914\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">Making Your Sites Tablet and Mobile Friendly<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">36:00<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-title-9915\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"false\" data-tab=\"5\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-tab-content-9915\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">Create Responsive Image Hotspots [Advanced Tutorial]<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">10:31<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-title-9916\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"false\" data-tab=\"6\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-tab-content-9916\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">How to Use Custom Positioning Units For Best Mobile Responsive Behavior<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">12:26<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-title-9917\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"false\" data-tab=\"7\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-tab-content-9917\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">How to Make a Responsive Page - Side By Side Columns<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">1:21<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class=\"shadow shadow-top\" aria-hidden=\"true\"><\/div>\n\t\t\t\t\t\t<div class=\"shadow shadow-bottom\" aria-hidden=\"true\"><\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t\t<div class=\"e-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-9911\" class=\"e-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-9911\" tabindex=\"0\" data-video-url=\"https:\/\/youtu.be\/EqFxeluk4U4\" data-video-type=\"youtube\" data-video-title=\"Elementor Responsive 101: All You Need to Know!\" data-video-duration=\"13:56\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-9912\" class=\"e-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-9912\" tabindex=\"0\" data-video-url=\"https:\/\/youtu.be\/U9dMTkBgsjg\" data-video-type=\"youtube\" data-video-title=\"How to Hide Columns Per Device\" data-video-duration=\"1:11\" hidden=\"hidden\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-9913\" class=\"e-tab-content elementor-clearfix\" data-tab=\"3\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-9913\" tabindex=\"0\" data-video-url=\"https:\/\/youtu.be\/QfjI0ILFUVA\" data-video-type=\"youtube\" data-video-title=\"Solving Responsive Web Design Challenges - Monday Masterclass\" data-video-duration=\"9:17\" hidden=\"hidden\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-9914\" class=\"e-tab-content elementor-clearfix\" data-tab=\"4\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-9914\" tabindex=\"0\" data-video-url=\"https:\/\/youtu.be\/DilH5rvTiS0\" data-video-type=\"youtube\" data-video-title=\"Making Your Sites Tablet and Mobile Friendly\" data-video-duration=\"36:00\" hidden=\"hidden\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-9915\" class=\"e-tab-content elementor-clearfix\" data-tab=\"5\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-9915\" tabindex=\"0\" data-video-url=\"https:\/\/youtu.be\/GlwuG8DAaDA\" data-video-type=\"youtube\" data-video-title=\"Create Responsive Image Hotspots [Advanced Tutorial]\" data-video-duration=\"10:31\" hidden=\"hidden\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-9916\" class=\"e-tab-content elementor-clearfix\" data-tab=\"6\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-9916\" tabindex=\"0\" data-video-url=\"https:\/\/youtu.be\/x5mrXwfavU0\" data-video-type=\"youtube\" data-video-title=\"How to Use Custom Positioning Units For Best Mobile Responsive Behavior\" data-video-duration=\"12:26\" hidden=\"hidden\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-9917\" class=\"e-tab-content elementor-clearfix\" data-tab=\"7\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-9917\" tabindex=\"0\" data-video-url=\"https:\/\/youtu.be\/eDeeemyla9k\" data-video-type=\"youtube\" data-video-title=\"How to Make a Responsive Page - Side By Side Columns\" data-video-duration=\"1:21\" hidden=\"hidden\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\t\t<div class=\"e-tabs-inner-tabs\" >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-9911\" class=\"e-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-9911\" tabindex=\"0\" data-video-url=\"https:\/\/youtu.be\/EqFxeluk4U4\" data-video-type=\"youtube\" data-video-title=\"Elementor Responsive 101: All You Need to Know!\" data-video-duration=\"13:56\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">\ud83d\udc4b\ud83c\udffc\u00a0 Help us improve by answering this short survey:<\/span><a href=\"https:\/\/www.youtube.com\/redirect?event=video_description&amp;redir_token=QUFFLUhqbEhtcm1mZzM3Z1lBZm1JVkg4ZHB4M3lla1ZlZ3xBQ3Jtc0tsT1VuSDZhVWM4dDVQY1BWVWpmMkJvUFZhOGU4Ym1XNEpzNE9ZT2NaTEFJVi1VQk9JQ3BPSDJwZDhfblhKQ20tczV3WGtyaXJPQnJqQWRVS2RRY2ZhREFRd1RZRlpuWDRMVGZoWEpPekdVeUpKamZ6QQ&amp;q=http%3A%2F%2Felemn.to%2Fsurvey-time\"> <span style=\"font-weight: 400\">http:\/\/elemn.to\/survey-time<\/span><\/a><br \/><br \/><span style=\"font-weight: 400\">In this tutorial, we will go over the responsive features and options in Elementor. We\u2019ll review the basics of responsive design, and optimize a website\u2019s header, content, and footer, using Elementor&#8217;s responsive section, column, and widget settings.<\/span><\/p><p><span style=\"font-weight: 400\">This tutorial will cover:<\/span><\/p><p><span style=\"font-weight: 400\">\u2714\ufe0e Responsive features<\/span><\/p><p><span style=\"font-weight: 400\">\u2714\ufe0e Responsive menu<\/span><\/p><p><span style=\"font-weight: 400\">\u2714\ufe0e Responsive font styles<\/span><\/p><p><span style=\"font-weight: 400\">\u2714\ufe0e Device-specific settings<\/span><\/p><p><span style=\"font-weight: 400\">\u2714\ufe0e And much more!<\/span><\/p><p><span style=\"font-weight: 400\">Don\u2019t forget to subscribe to our channel!<\/span><\/p><p><span style=\"font-weight: 400\">Get Elementor:<\/span><a href=\"https:\/\/www.youtube.com\/redirect?event=video_description&amp;redir_token=QUFFLUhqbmpwRlFtMlhlUkRvdlBNTTZXVHV4UmlNVnktQXxBQ3Jtc0tuWVRwTUJISHFiMXVlWEN6TDY1R3pvaEZneFRfWDdaNS1kaEFRTTZNeE1LLW5DVDdYVFA0elpDZzRrWks1NWFGd3lSN3VqZEhmUTNpb2FsWktSRHpsdnRUWXNkQk11UDBzR3RxY3VVTXNjUUp4VzVmYw&amp;q=https%3A%2F%2Felementor.com%2F\"> <span style=\"font-weight: 400\">https:\/\/elementor.com\/<\/span><\/a><\/p><p><span style=\"font-weight: 400\">Get Elementor Pro:<\/span><a href=\"https:\/\/www.youtube.com\/redirect?event=video_description&amp;redir_token=QUFFLUhqbWZOenJTYjVIUGRITHhwajdaX2ZKdWtwOTEzUXxBQ3Jtc0ttUktTRGEyYl9pWWNjcjZUdDZSbU1PMXZ2MDlNX2ZFckhvRzhLVmxxT1labnM2ZUo1ak5ldllGT1FySVJ2eFV4b0h2aVlRR1Jhd1NlV1hoMXpRVDZxLXNUWmJIYzZGdm5ER3BYZXNfejh6cnpYWGhOWQ&amp;q=https%3A%2F%2Felementor.com%2Fpro%2F\"> <span style=\"font-weight: 400\">https:\/\/elementor.com\/pro\/<\/span><\/a><\/p><p><a href=\"https:\/\/www.youtube.com\/watch?v=EqFxeluk4U4&amp;t=0s\"><span style=\"font-weight: 400\">00:00<\/span><\/a><span style=\"font-weight: 400\"> &#8211;<\/span><a href=\"https:\/\/www.youtube.com\/watch?v=EqFxeluk4U4&amp;t=61s\"> <span style=\"font-weight: 400\">01:01<\/span><\/a><span style=\"font-weight: 400\"> &#8211; Intro &#8211; What We\u2019ll See in this Tutorial<\/span><\/p><p><a href=\"https:\/\/www.youtube.com\/watch?v=EqFxeluk4U4&amp;t=62s\"><span style=\"font-weight: 400\">01:02<\/span><\/a><span style=\"font-weight: 400\"> &#8211;<\/span><a href=\"https:\/\/www.youtube.com\/watch?v=EqFxeluk4U4&amp;t=248s\"> <span style=\"font-weight: 400\">04:08<\/span><\/a><span style=\"font-weight: 400\"> &#8211; Elementor\u2019s Responsive Features<\/span><\/p><p><a href=\"https:\/\/www.youtube.com\/watch?v=EqFxeluk4U4&amp;t=249s\"><span style=\"font-weight: 400\">04:09<\/span><\/a><span style=\"font-weight: 400\"> &#8211;<\/span><a href=\"https:\/\/www.youtube.com\/watch?v=EqFxeluk4U4&amp;t=359s\"> <span style=\"font-weight: 400\">05:59<\/span><\/a><span style=\"font-weight: 400\"> &#8211; Responsive Menu<\/span><\/p><p><a href=\"https:\/\/www.youtube.com\/watch?v=EqFxeluk4U4&amp;t=360s\"><span style=\"font-weight: 400\">06:00<\/span><\/a><span style=\"font-weight: 400\"> &#8211;<\/span><a href=\"https:\/\/www.youtube.com\/watch?v=EqFxeluk4U4&amp;t=467s\"> <span style=\"font-weight: 400\">07:47<\/span><\/a><span style=\"font-weight: 400\"> &#8211; Column Width &amp; Wrapping<\/span><\/p><p><a href=\"https:\/\/www.youtube.com\/watch?v=EqFxeluk4U4&amp;t=468s\"><span style=\"font-weight: 400\">07:48<\/span><\/a><span style=\"font-weight: 400\"> &#8211;<\/span><a href=\"https:\/\/www.youtube.com\/watch?v=EqFxeluk4U4&amp;t=528s\"> <span style=\"font-weight: 400\">08:48<\/span><\/a><span style=\"font-weight: 400\"> &#8211; Responsive Font Styles<\/span><\/p><p><a href=\"https:\/\/www.youtube.com\/watch?v=EqFxeluk4U4&amp;t=529s\"><span style=\"font-weight: 400\">08:49<\/span><\/a><span style=\"font-weight: 400\"> &#8211;<\/span><a href=\"https:\/\/www.youtube.com\/watch?v=EqFxeluk4U4&amp;t=574s\"> <span style=\"font-weight: 400\">09:34<\/span><\/a><span style=\"font-weight: 400\"> &#8211; Hide and Show Elements on Different Devices<\/span><\/p><p><a href=\"https:\/\/www.youtube.com\/watch?v=EqFxeluk4U4&amp;t=575s\"><span style=\"font-weight: 400\">09:35<\/span><\/a><span style=\"font-weight: 400\"> &#8211;<\/span><a href=\"https:\/\/www.youtube.com\/watch?v=EqFxeluk4U4&amp;t=608s\"> <span style=\"font-weight: 400\">10:08<\/span><\/a><span style=\"font-weight: 400\"> &#8211; Reverse Column Order in Different Viewports<\/span><\/p><p><a href=\"https:\/\/www.youtube.com\/watch?v=EqFxeluk4U4&amp;t=609s\"><span style=\"font-weight: 400\">10:09<\/span><\/a><span style=\"font-weight: 400\"> &#8211;<\/span><a href=\"https:\/\/www.youtube.com\/watch?v=EqFxeluk4U4&amp;t=684s\"> <span style=\"font-weight: 400\">11:24<\/span><\/a><span style=\"font-weight: 400\"> &#8211; Hide &amp; Show Elements &#8211; Best Practice<\/span><\/p><p><a href=\"https:\/\/www.youtube.com\/watch?v=EqFxeluk4U4&amp;t=685s\"><span style=\"font-weight: 400\">11:25<\/span><\/a><span style=\"font-weight: 400\"> &#8211;<\/span><a href=\"https:\/\/www.youtube.com\/watch?v=EqFxeluk4U4&amp;t=732s\"> <span style=\"font-weight: 400\">12:12<\/span><\/a><span style=\"font-weight: 400\"> &#8211; Responsive Widget Options<\/span><\/p><p><a href=\"https:\/\/www.youtube.com\/watch?v=EqFxeluk4U4&amp;t=733s\"><span style=\"font-weight: 400\">12:13<\/span><\/a><span style=\"font-weight: 400\"> &#8211;<\/span><a href=\"https:\/\/www.youtube.com\/watch?v=EqFxeluk4U4&amp;t=836s\"> <span style=\"font-weight: 400\">13:56<\/span><\/a><span style=\"font-weight: 400\"> &#8211; Recap &#8211; What We Learned in this Tutorial<\/span><\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-9912\" class=\"e-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-9912\" tabindex=\"0\" data-video-url=\"https:\/\/youtu.be\/U9dMTkBgsjg\" data-video-type=\"youtube\" data-video-title=\"How to Hide Columns Per Device\" data-video-duration=\"1:11\" hidden=\"hidden\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">In this tutorial, we&#8217;ll go over how to hide a column in Elementor 2.5.<\/span><\/p><p>\u00a0<\/p><p><span style=\"font-weight: 400\">Learn More:<\/span><a href=\"https:\/\/www.youtube.com\/redirect?event=video_description&amp;redir_token=QUFFLUhqbklHdVV1UDR3UUowRFg3RWpJcENobnpvSVZNUXxBQ3Jtc0trTDJveWg2U29qMEdILVB4eUNldEVuN00xb2laMWloZHJhNG9YeGFsWUpfWk9uLW5aZkNqd1V4SFlxZE1QTzR6S0FnLVZEVHYxSG9EeXJhYXBVREJNREdha1h5WHF3MkJ5TTZZMXpGMm9neHlWMmdnOA&amp;q=https%3A%2F%2Felementor.com%2Fblog%2Fintroducing-flexible-layout%2F\"> <span style=\"font-weight: 400\">https:\/\/elementor.com\/blog\/introducin&#8230;<\/span><\/a><\/p><p><span style=\"font-weight: 400\">Get Elementor Pro:<\/span><a href=\"https:\/\/www.youtube.com\/redirect?event=video_description&amp;redir_token=QUFFLUhqbXVRcGdXNHlSUmc1RlR3STdoWlVqdTNoOWctQXxBQ3Jtc0tuRnhfR3ExX2tFU2NNcjhEdmhfalpVX0o5dUE4Vk5PUGZEaG9LMzk2OElYNC1JaEJNYmJrVnlpenVHZnAtZ2xCZmNGQWNqaXVxYUtxSVRVUDgydFp1WjVPbGJ4cW9hNFZKR0RQSDk5dG5CSld5MHNBMA&amp;q=https%3A%2F%2Felementor.com%2Fpro%2F\"> <span style=\"font-weight: 400\">https:\/\/elementor.com\/pro\/<\/span><\/a><\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-9913\" class=\"e-tab-content elementor-clearfix\" data-tab=\"3\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-9913\" tabindex=\"0\" data-video-url=\"https:\/\/youtu.be\/QfjI0ILFUVA\" data-video-type=\"youtube\" data-video-title=\"Solving Responsive Web Design Challenges - Monday Masterclass\" data-video-duration=\"9:17\" hidden=\"hidden\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">In this tutorial, we examine several responsive web design challenges and explore various ways to solve them elegantly using Elementor.<\/span><\/p><p>\u00a0<\/p><p><span style=\"font-weight: 400\">Tip #1. Responsive Design Begins and Ends With Correct Planning.<\/span><\/p><p><span style=\"font-weight: 400\">In this business, no one in their right mind would set off on a project without a plan, a draft or sketch. The more forethought and planning you can invest in the design process, the better you will be able to anticipate the technical problems and adjust your ideas accordingly.\u00a0<\/span><\/p><p>\u00a0<\/p><p><span style=\"font-weight: 400\">Tip #2. Positioning Elements for Mobile Responsive View<\/span><\/p><p><span style=\"font-weight: 400\">When it comes to correctly positioning sections for mobile responsive view, we suggest avoiding setting values in pixels. Setting values in percent (%) or in EM keeps them relative to the overall screen size. Thanks to the responsive mode, we were able to conclude that we should set the padding to 17% either side of the text widget, in our next example, so that we get similar positioning in both desktop and mobile view.<\/span><\/p><p>\u00a0<\/p><p><span style=\"font-weight: 400\">Tip #3. Responsive Design: A Horizontal Approach<\/span><\/p><p><span style=\"font-weight: 400\">Traditionally, web design is a vertical process, which is why many designers prefer to complete the design of the entire page for a single device before, trying to make the same design work as well on the next device. An easier way to go about this is to design our views horizontally, one section at a time, across all our devices as we go along.\u00a0<\/span><\/p><p>\u00a0<\/p><p><span style=\"font-weight: 400\">Once we have made sure that section looking the way we want it to in Desktop, Tablet, and Mobile views, we can move on to the next. Where possible, duplicate sections, columns or widgets, and update the relevant content; re-use them as foundations to build the other similar elements on the page.<\/span><\/p><p>\u00a0<\/p><p><span style=\"font-weight: 400\">Tip #4. Change \/ Position Background Image<\/span><\/p><p><span style=\"font-weight: 400\">Certain background images, like that of the example below, may look great in the desktop view. However, it doesn\u2019t take much experience to see how it wouldn\u2019t work well when viewing the site on a mobile screen.<\/span><\/p><p>\u00a0<\/p><p><span style=\"font-weight: 400\">Tip #5. Create Alternative Section<\/span><\/p><p><span style=\"font-weight: 400\">As promised, we are only too happy to share our experience and insight with our community, who will no doubt be familiar with our next example. Well within the top area of our home page, we needed to come up with a solution to the 3-column text section. Rather than having this appear as 3 boring rows of text in Mobile view, we decided to create an alternative section, with the text inside a slider widget.<\/span><\/p><p>\u00a0<\/p><p><span style=\"font-weight: 400\">Read the full post:<\/span><a href=\"https:\/\/www.youtube.com\/redirect?event=video_description&amp;redir_token=QUFFLUhqazJocXpFSThaVTJ0RU96Nkp3XzRobUdDSVdyUXxBQ3Jtc0tuX3lNTlVNT1E2bjVMb0pZLUNuMlRBb1lpRWs2MW1nUXByakRzTU5kOU1QV2tvZXptWWpjLUptTkRrcTlBRlB0TXZOeW1yYklKNTMwc1BBcGpXSktzWWw2alpjVXpKWGR2WnBTNmdKM1hxNDRiM0RkQQ&amp;q=https%3A%2F%2Felementor.com%2Fblog%2Fresponsive-web-design%2F\"> <span style=\"font-weight: 400\">https:\/\/elementor.com\/blog\/responsive&#8230;<\/span><\/a><\/p><p><span style=\"font-weight: 400\">Get Elementor:<\/span><a href=\"https:\/\/www.youtube.com\/redirect?event=video_description&amp;redir_token=QUFFLUhqbUY3SGkteF9aazBBLWtJV0xuMVF6cGNJUVlMd3xBQ3Jtc0tuQTJOMFpGbnBWREFKd2xWVW9XUXZNUTFTVDJCazg5d19DWHQ2NWd3aWtLNklIZW9QbFVES3ZOaWNmYUw0R3Znb3pWREN3VmF0UTNXdVpJek5lWmlNcmxEMXpseUh1aVZieGtBQnQyVnZIWV81cjRnSQ&amp;q=https%3A%2F%2Felementor.com\"> <span style=\"font-weight: 400\">https:\/\/elementor.com<\/span><\/a><\/p><p><span style=\"font-weight: 400\">Get Elementor Pro:<\/span><a href=\"https:\/\/www.youtube.com\/redirect?event=video_description&amp;redir_token=QUFFLUhqbVBZcFVZODlxZ2NQczlsaW5UNUNmS0Vicm5sQXxBQ3Jtc0tsdXlSclBVb3FvVWJzQ2lVek53WlFISjVlWXBfMWNZRHRGRVhUZE81LW9lcTdvNkFLWGRzRTBEWk5DeDZybk8xTmhjdUUxX3g3ZzhNS3NucWhpREREUnhHb3RwbS14eUhMTmFDV3c3X0tzWjdzOFI4TQ&amp;q=https%3A%2F%2Felementor.com%2Fpro%2F\"> <span style=\"font-weight: 400\">https:\/\/elementor.com\/pro\/<\/span><\/a><\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-9914\" class=\"e-tab-content elementor-clearfix\" data-tab=\"4\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-9914\" tabindex=\"0\" data-video-url=\"https:\/\/youtu.be\/DilH5rvTiS0\" data-video-type=\"youtube\" data-video-title=\"Making Your Sites Tablet and Mobile Friendly\" data-video-duration=\"36:00\" hidden=\"hidden\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Join Ziv Geurts, Designer &amp; Elementor\u2019s Lead Educator, for a step-by-step walkthrough on how to use Elementor\u2019s responsive settings to make sure your sites look great on tablet and mobile devices. The demo site is built with Elementor Pro, but the webinar will cover many topics relevant to all users.<\/span><\/p><p>\u00a0<\/p><p><span style=\"font-weight: 400\">6 Takeaways:<\/span><\/p><p><span style=\"font-weight: 400\">\u2713 Optimize and style navbar hamburger menus for tablet and mobile [PRO]<\/span><\/p><p><span style=\"font-weight: 400\">\u2713 Use Elementor\u2019s responsive settings to create device specific designs<\/span><\/p><p><span style=\"font-weight: 400\">\u2713 Control column width and alignment per device<\/span><\/p><p><span style=\"font-weight: 400\">\u2713 Use relative units that scale better on devices, such as EM and %<\/span><\/p><p><span style=\"font-weight: 400\">\u2713 Optimize your Global Fonts for different viewports<\/span><\/p><p><span style=\"font-weight: 400\">\u2713 Manage Motion Effects for tablet and mobile devices [PRO]<\/span><\/p><p>\u00a0<\/p><p><span style=\"font-weight: 400\">Links mentioned in the Webinar:<\/span><\/p><ol><li><span style=\"font-weight: 400\"> How to Use Column Alignment:<\/span><a href=\"https:\/\/www.youtube.com\/watch?v=htUvG2Y5vaY&amp;t=0s\"> <span style=\"font-weight: 400\">https:\/\/youtu.be\/htUvG2Y5vaY<\/span><\/a><\/li><li><span style=\"font-weight: 400\"> How to Use Motion Effects Viewport Settings:<\/span><a href=\"https:\/\/www.youtube.com\/watch?v=0pjPb8orwXM&amp;t=0s\"> <span style=\"font-weight: 400\">https:\/\/youtu.be\/0pjPb8orwXM<\/span><\/a><\/li><li><span style=\"font-weight: 400\"> Global Colors &amp; Fonts Webinar:<\/span><a href=\"https:\/\/www.youtube.com\/watch?v=OvETB43I7_w&amp;t=0s\"> <span style=\"font-weight: 400\">https:\/\/youtu.be\/OvETB43I7_w<\/span><\/a><\/li><\/ol><p>\u00a0<\/p><p><span style=\"font-weight: 400\">Don\u2019t forget to subscribe to our channel!<\/span><\/p><p><span style=\"font-weight: 400\">Get Elementor:<\/span><a href=\"https:\/\/www.youtube.com\/redirect?event=video_description&amp;redir_token=QUFFLUhqbl9NNFpBVkxEWDNlSTJ6Y1dJZ0JWVEpvOHpEUXxBQ3Jtc0ttek1iaHlEbW85VUVpYThUc2t6VjdTanhaLXRzeTg4dE5Udmo4eU5iNGVpNmpERzNMUkdnXy1GSzdfX3ZNNUg4eFdQSkN1a04xbnY4T2xIWXhacERXYkM1aVdRbEw1Tm5vN0hlRU5JV3dDQWJIRjNsRQ&amp;q=https%3A%2F%2Felementor.com%2F%E2%80%8B\"> <span style=\"font-weight: 400\">https:\/\/elementor.com\/\u200b<\/span><\/a><\/p><p><span style=\"font-weight: 400\">Get Pro:<\/span><a href=\"https:\/\/www.youtube.com\/redirect?event=video_description&amp;redir_token=QUFFLUhqbmFLaHhTRU4zZ2MxNGdid2pxUmNKdi1odmZzQXxBQ3Jtc0tudDEwMllOUGJLRjB2YmFCT2JIc2tYTUlmeVlPbUZBZFJKekgyd1lIWEM3QW5Db05ZNVR4NTNKR3EyeDdmTWEzdFZNeFFTWnltQzQ1ZzNpTi1BNmV5MTFtZ0pUSVRSaFdQalZESEZkTWNjTDVJMHdMQQ&amp;q=https%3A%2F%2Felementor.com%2Fpro\"> <span style=\"font-weight: 400\">https:\/\/elementor.com\/pro<\/span><\/a><\/p><p>\u00a0<\/p><p><span style=\"font-weight: 400\">TIMESTAMPS:<\/span><\/p><p><a href=\"https:\/\/www.youtube.com\/watch?v=DilH5rvTiS0&amp;t=0s\"><span style=\"font-weight: 400\">00:00<\/span><\/a><span style=\"font-weight: 400\"> Introduction\u00a0<\/span><\/p><p><a href=\"https:\/\/www.youtube.com\/watch?v=DilH5rvTiS0&amp;t=112s\"><span style=\"font-weight: 400\">01:52<\/span><\/a><span style=\"font-weight: 400\"> Site overview on tablet &amp; mobile devices<\/span><\/p><p><a href=\"https:\/\/www.youtube.com\/watch?v=DilH5rvTiS0&amp;t=210s\"><span style=\"font-weight: 400\">03:30<\/span><\/a><span style=\"font-weight: 400\"> Optimize &amp; style the navbar hamburger menu for tablet and mobile<\/span><\/p><p><a href=\"https:\/\/www.youtube.com\/watch?v=DilH5rvTiS0&amp;t=411s\"><span style=\"font-weight: 400\">06:51<\/span><\/a><span style=\"font-weight: 400\"> Tweak the header for mobile, device icons &amp; alignment\u00a0<\/span><\/p><p><a href=\"https:\/\/www.youtube.com\/watch?v=DilH5rvTiS0&amp;t=570s\"><span style=\"font-weight: 400\">09:30<\/span><\/a><span style=\"font-weight: 400\"> Create device specific layouts using column width &amp; responsive visibility<\/span><\/p><p><a href=\"https:\/\/www.youtube.com\/watch?v=DilH5rvTiS0&amp;t=770s\"><span style=\"font-weight: 400\">12:50<\/span><\/a><span style=\"font-weight: 400\"> Optimize your global fonts for different viewports, understand default behavior &amp; use EM to save time<\/span><\/p><p><a href=\"https:\/\/www.youtube.com\/watch?v=DilH5rvTiS0&amp;t=1108s\"><span style=\"font-weight: 400\">18:28<\/span><\/a><span style=\"font-weight: 400\"> Build a simple 2 column, text and image design &amp; apply motion effects with mobile in mind<\/span><\/p><p><a href=\"https:\/\/www.youtube.com\/watch?v=DilH5rvTiS0&amp;t=1468s\"><span style=\"font-weight: 400\">24:28<\/span><\/a><span style=\"font-weight: 400\"> Tweak your buttons per device &amp; understand the impact of changing values with settings that don\u2019t have device icons<\/span><\/p><p><a href=\"https:\/\/www.youtube.com\/watch?v=DilH5rvTiS0&amp;t=1564s\"><span style=\"font-weight: 400\">26:04<\/span><\/a><span style=\"font-weight: 400\"> PX vs. % use relative units that scale better on devices<\/span><\/p><p><a href=\"https:\/\/www.youtube.com\/watch?v=DilH5rvTiS0&amp;t=1657s\"><span style=\"font-weight: 400\">27:37<\/span><\/a><span style=\"font-weight: 400\"> Applying Elementor\u2019s responsive settings to create a custom footer layout for tablet and mobile<\/span><\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-9915\" class=\"e-tab-content elementor-clearfix\" data-tab=\"5\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-9915\" tabindex=\"0\" data-video-url=\"https:\/\/youtu.be\/GlwuG8DAaDA\" data-video-type=\"youtube\" data-video-title=\"Create Responsive Image Hotspots [Advanced Tutorial]\" data-video-duration=\"10:31\" hidden=\"hidden\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">In this Tips &amp; Tricks Tutorial, we learn how to create responsive-friendly Image Hotspots entirely with Elementor. Adding a layer of playful UX is a great way to increase website conversion rates and really make them stand out!<\/span><\/p><p><span style=\"font-weight: 400\">We use Elementor\u2019s Image and Flip Box widgets to build this effect while going over the fundamentals of absolute positioning.<\/span><\/p><p>\u00a0<\/p><p><span style=\"font-weight: 400\">This tutorial will cover:<\/span><\/p><p><span style=\"font-weight: 400\">\u2714\ufe0e How to create and use Image Hotspots<\/span><\/p><p><span style=\"font-weight: 400\">\u2714\ufe0e Understand the Image and Flip Box widgets<\/span><\/p><p><span style=\"font-weight: 400\">\u2714\ufe0e Absolute positioning<\/span><\/p><p><span style=\"font-weight: 400\">\u2714\ufe0e Responsiveness with Absolute positioning<\/span><\/p><p><span style=\"font-weight: 400\">\u2714\ufe0e Column Alignment<\/span><\/p><p><span style=\"font-weight: 400\">\u2714\ufe0e And more!<\/span><\/p><p>\u00a0<\/p><p><span style=\"font-weight: 400\">Don\u2019t forget to subscribe to our channel!<\/span><\/p><p>\u00a0<\/p><p><span style=\"font-weight: 400\">Get Elementor:<\/span><a href=\"https:\/\/www.youtube.com\/redirect?event=video_description&amp;redir_token=QUFFLUhqbU4yTUMzSzFKbkNpRVpRQkZSa3JHYlZjSTZuUXxBQ3Jtc0tubndtX2VUcUdUdXNGTzBnSEk3SU5RSnhrdGowV3N0bjN3VVdEMHp5ejJDSV9sVU5LWm9EMnVRX3QtSDBYSVRWSFBSWERoYThXdFNDODFqTTVqZ1RfbkZUaXp5QVZuZ1kwNWdkWjBySm9kQXlucnJCOA&amp;q=https%3A%2F%2Felementor.com%2F\"> <span style=\"font-weight: 400\">https:\/\/elementor.com\/<\/span><\/a><\/p><p><span style=\"font-weight: 400\">Get Pro:<\/span><a href=\"https:\/\/www.youtube.com\/redirect?event=video_description&amp;redir_token=QUFFLUhqbkNmYWZvd0RkY0V4cFc0bzU3ZjFzSldodE5VUXxBQ3Jtc0ttUzN6ZGVqYzBCTkN6eTcyX1dSNE1CNWtYLU5QVTExbmJLS1JlX3hxM1BYeVFtenZsZEtmOEJPOGlaWG9TYVJ5V3VDcDhjTm9wUlVySnlwa0x4cWEwRkpCR3JxMFVJTHhzR25zUXFLTFZ0dEN4bWJ2VQ&amp;q=https%3A%2F%2Felementor.com%2Fpro\"> <span style=\"font-weight: 400\">https:\/\/elementor.com\/pro<\/span><\/a><\/p><p>\u00a0<\/p><p><span style=\"font-weight: 400\">Check out these tutorials to learn more about custom positioning:<\/span><\/p><ol><li><span style=\"font-weight: 400\"> How to Use Absolute &amp; Fixed Custom Positioning in Elementor:<\/span><\/li><\/ol><p><a href=\"https:\/\/www.youtube.com\/watch?v=vJ851SD-6u0&amp;t=0s\"><span style=\"font-weight: 400\">https:\/\/youtu.be\/vJ851SD-6u0<\/span><\/a><\/p><ol start=\"2\"><li><span style=\"font-weight: 400\"> Do\u2019s &amp; Don\u2019ts: Absolute &amp; Fixed Position in Elementor:<\/span><\/li><\/ol><p><a href=\"https:\/\/www.youtube.com\/watch?v=RA0T52VB2Os&amp;t=0s\"><span style=\"font-weight: 400\">https:\/\/youtu.be\/RA0T52VB2Os<\/span><\/a><\/p><ol start=\"3\"><li><span style=\"font-weight: 400\"> How to Use Custom Positioning Units For Best Mobile Responsive Behavior:<\/span><\/li><\/ol><p><a href=\"https:\/\/www.youtube.com\/watch?v=x5mrXwfavU0&amp;t=0s\"><span style=\"font-weight: 400\">https:\/\/youtu.be\/x5mrXwfavU0<\/span><\/a><\/p><p>\u00a0<\/p><p><span style=\"font-weight: 400\">Note: This is an advanced tutorial, if you are facing difficulties keeping your flip-box icon responsive, try setting it to the top left corner by following these steps:<\/span><\/p><p><span style=\"font-weight: 400\">Click your flip-box widget and in the Style tab, set the Alignment to left and Vertical Alignment to Top<\/span><\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-9916\" class=\"e-tab-content elementor-clearfix\" data-tab=\"6\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-9916\" tabindex=\"0\" data-video-url=\"https:\/\/youtu.be\/x5mrXwfavU0\" data-video-type=\"youtube\" data-video-title=\"How to Use Custom Positioning Units For Best Mobile Responsive Behavior\" data-video-duration=\"12:26\" hidden=\"hidden\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Learn how to use the custom positioning units (px.%, VH, VW) with responsive behavior in mind.<br \/><\/span><span style=\"font-weight: 400\">You will learn:<\/span><\/p><p><span style=\"font-weight: 400\">\u2714\ufe0e The difference between px, %, VH &amp; VW<\/span><\/p><p><span style=\"font-weight: 400\">\u2714\ufe0e How to properly use these values<\/span><\/p><p><span style=\"font-weight: 400\">\u2714\ufe0e Best positioning practices for mobile responsive behavior\u00a0<\/span><\/p><p>\u00a0<\/p><p><span style=\"font-weight: 400\">Learn more about custom positioning here:<\/span><a href=\"https:\/\/www.youtube.com\/watch?v=RA0T52VB2Os&amp;t=0s\"> <span style=\"font-weight: 400\">https:\/\/www.youtube.com\/watch?v=RA0T5&#8230;<\/span><\/a><\/p><p>\u00a0<\/p><p><span style=\"font-weight: 400\">Learn More:<\/span><a href=\"https:\/\/www.youtube.com\/redirect?event=video_description&amp;redir_token=QUFFLUhqbUJMQzRSNDluNEJrQUdUaEdUNzg3U3ZTT0haQXxBQ3Jtc0ttVWw0VFg0V19hZ2hqc25HcjhnWGwtdVlEeGcyb3Q0Z3BlZzRPbGdNTk9hSWtnUUxpNGRYdnl6ZG94cm5FRUF3QWIzT0EwZTlxU1ZnS1lQdmtHcUxXcWFPMi1FLXBpb29oZFVQZlhZeXFZckgzWFo3TQ&amp;q=https%3A%2F%2Felementor.com%2Fblog%2Fintroducing-flexible-layout%2F\"> <span style=\"font-weight: 400\">https:\/\/elementor.com\/blog\/introducin&#8230;<\/span><\/a><\/p><p><span style=\"font-weight: 400\">Get Elementor Pro:<\/span><a href=\"https:\/\/www.youtube.com\/redirect?event=video_description&amp;redir_token=QUFFLUhqblA3RGVhX3JGeDBfSmNoTmFhc0ctSW9pc251UXxBQ3Jtc0ttUWZfUzR6bWUtMmdGUnBJRHdRN0daRWItLUtoZWNQZDlIVkxGcjk4bGNWcDNnU1RvTy15UVltdllvUElEUGhjYzZkdVREYTU4ZDUxWlk1YVRTVFY2SzRxeDU4ckR1VHRzQzUtZUNBdkVwUjNic3VBVQ&amp;q=https%3A%2F%2Felementor.com%2Fpro%2F\"> <span style=\"font-weight: 400\">https:\/\/elementor.com\/pro\/<\/span><\/a><\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-9917\" class=\"e-tab-content elementor-clearfix\" data-tab=\"7\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-9917\" tabindex=\"0\" data-video-url=\"https:\/\/youtu.be\/eDeeemyla9k\" data-video-type=\"youtube\" data-video-title=\"How to Make a Responsive Page - Side By Side Columns\" data-video-duration=\"1:21\" hidden=\"hidden\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">In this video, you will learn how to align columns side by side on WordPress pages viewed on mobile devices. By changing each column width in Elementor, you can easily align two or more column horizontally.<\/span><\/p><p>\u00a0<\/p><p><span style=\"font-weight: 400\">For more tutorials, check out our<\/span><a href=\"https:\/\/www.youtube.com\/redirect?event=video_description&amp;redir_token=QUFFLUhqbGNwZ1BEWFlWeFE4WkFQSlZYMXVHTjVrSmxOUXxBQ3Jtc0trd2E4V3Bpc3V5a0hqb1hteXNhdk9RTEdGYnlJX0p6WjJJT3o0Z2hWUTZTLVJjRTVENzFnNzZXTDlTaVJrZEFXajVFQXBnc2s0bWtWbjJ1V1RTTFd3T1NITVdndk1RUzh3bXlrZ0l3djdlb0hLVG1FMA&amp;q=https%3A%2F%2Fdocs.elementor.com\"> <span style=\"font-weight: 400\">https:\/\/docs.elementor.com<\/span><\/a><\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\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>Responsive Collection 7 Videos Elementor Responsive 101: All You Need to Know! 13:56 How to Hide Columns Per Device 1:11 Solving Responsive Web Design Challenges &#8211; Monday Masterclass 9:17 Making Your Sites Tablet and Mobile Friendly 36:00 Create Responsive Image Hotspots [Advanced Tutorial] 10:31 How to Use Custom Positioning Units For Best Mobile Responsive Behavior [&hellip;]<\/p>\n","protected":false},"author":17,"featured_media":4882,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[46],"class_list":["post-4520","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-responsive","tag-video-collections"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Responsive Collection - 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\/responsive-collection\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive Collection - Academy\" \/>\n<meta property=\"og:description\" content=\"Responsive Collection 7 Videos Elementor Responsive 101: All You Need to Know! 13:56 How to Hide Columns Per Device 1:11 Solving Responsive Web Design Challenges &#8211; Monday Masterclass 9:17 Making Your Sites Tablet and Mobile Friendly 36:00 Create Responsive Image Hotspots [Advanced Tutorial] 10:31 How to Use Custom Positioning Units For Best Mobile Responsive Behavior [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/responsive-collection\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-20T06:26:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-21T10:27:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/Responsive-1.png\" \/>\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\/png\" \/>\n<meta name=\"author\" content=\"Simi Zelikovitch\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Simi Zelikovitch\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Responsive Collection - 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\/responsive-collection\/","og_locale":"en_US","og_type":"article","og_title":"Responsive Collection - Academy","og_description":"Responsive Collection 7 Videos Elementor Responsive 101: All You Need to Know! 13:56 How to Hide Columns Per Device 1:11 Solving Responsive Web Design Challenges &#8211; Monday Masterclass 9:17 Making Your Sites Tablet and Mobile Friendly 36:00 Create Responsive Image Hotspots [Advanced Tutorial] 10:31 How to Use Custom Positioning Units For Best Mobile Responsive Behavior [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/responsive-collection\/","og_site_name":"Academy","article_published_time":"2021-07-20T06:26:36+00:00","article_modified_time":"2023-02-21T10:27:53+00:00","og_image":[{"width":1923,"height":1081,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/Responsive-1.png","type":"image\/png"}],"author":"Simi Zelikovitch","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Simi Zelikovitch","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/responsive-collection\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/responsive-collection\/"},"author":{"name":"Simi Zelikovitch","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/4b1a4a9e881cd66953a9a1c12029b83d"},"headline":"Responsive Collection","datePublished":"2021-07-20T06:26:36+00:00","dateModified":"2023-02-21T10:27:53+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/responsive-collection\/"},"wordCount":1309,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/responsive-collection\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/Responsive-1.png","keywords":["Video Collections"],"articleSection":["Responsive"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/responsive-collection\/","url":"https:\/\/elementor.com\/academy\/responsive-collection\/","name":"Responsive Collection - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/responsive-collection\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/responsive-collection\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/Responsive-1.png","datePublished":"2021-07-20T06:26:36+00:00","dateModified":"2023-02-21T10:27:53+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/responsive-collection\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/responsive-collection\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/responsive-collection\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/Responsive-1.png","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/Responsive-1.png","width":1923,"height":1081},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/responsive-collection\/#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":"Responsive Collection"}]},{"@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\/4b1a4a9e881cd66953a9a1c12029b83d","name":"Simi Zelikovitch","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1c9fd9755c57ca20d36099612923a73e4e94843c2aa9cd6d6dd8fb448b4a58f5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1c9fd9755c57ca20d36099612923a73e4e94843c2aa9cd6d6dd8fb448b4a58f5?s=96&d=mm&r=g","caption":"Simi Zelikovitch"},"description":"Design leader in the Consumer Success team at Elementor, a UX expert with a mission to create outstanding user experience, and not a terrible basketball player.","url":"https:\/\/elementor.com\/academy\/author\/simi-zelikovitch\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/4520","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\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=4520"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/4520\/revisions"}],"predecessor-version":[{"id":9621,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/4520\/revisions\/9621"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4882"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=4520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=4520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=4520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}