{"id":2995,"date":"2021-06-23T07:50:23","date_gmt":"2021-06-23T07:50:23","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=2995"},"modified":"2023-02-21T10:47:58","modified_gmt":"2023-02-21T10:47:58","slug":"how-to-make-a-responsive-page-on-wordpress-side-by-side-columns","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-make-a-responsive-page-on-wordpress-side-by-side-columns\/","title":{"rendered":"How to Make a Responsive Page On WordPress &#8211; Side By Side Columns"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2995\" class=\"elementor elementor-2995\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7a37c873 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7a37c873\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3a12c62f\" data-id=\"3a12c62f\" 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-61e41080 elementor-widget elementor-widget-video\" data-id=\"61e41080\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=eDeeemyla9k&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7d947930 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7d947930\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-68d8e02d\" data-id=\"68d8e02d\" 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-4a435d8b elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"4a435d8b\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1241\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1241\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1242\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1242\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1241\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1241\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1241\" tabindex=\"0\" hidden=\"false\"><p>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.<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1242\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1242\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1242\" tabindex=\"0\" hidden=\"hidden\"><p>hi welcome to elemental house next<br \/>question comes from Karthik yeah how can<br \/>i display two columns side by side on<br \/>mobile<br \/>Elementor has a full set of features for<br \/>visually customizing mobile responsive<br \/>pages here I&#8217;ve set up two columns one<br \/>with an image widget and the other with<br \/>a heading on desktop they appear side by<br \/>side but when I switch to mobile view<br \/>they are arranged one below the other<br \/>this is because by default each column<br \/>takes up 100% of the width in order to<br \/>keep the column side-by-side I&#8217;m going<br \/>to go to column advanced and under<br \/>responsive I&#8217;m going to change the<br \/>column width to 50% I&#8217;m going to do the<br \/>same thing with the second column<br \/>advanced responsive column with 50% now<br \/>as you can see the columns are set<br \/>side-by-side because over 60% of your<br \/>visitors surf on mobile devices it&#8217;s<br \/>highly recommended to take advantage of<br \/>elementor&#8217;s mobile editing tools it I<br \/>hope you enjoyed this video for more<br \/>videos subscribe to our Channel go to<br \/>Docs the elementary offer<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview 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. Transcript hi welcome to elemental house next question comes from Karthik yeah how can i display [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4113,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[41],"class_list":["post-2995","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-responsive","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Make a Responsive Page On WordPress - Side By Side Columns - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/how-to-make-a-responsive-page-on-wordpress-side-by-side-columns\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Make a Responsive Page On WordPress - Side By Side Columns - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview 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. Transcript hi welcome to elemental house next question comes from Karthik yeah how can i display [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-make-a-responsive-page-on-wordpress-side-by-side-columns\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-23T07:50:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-21T10:47:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Make-a-Responsive-Page-2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1923\" \/>\n\t<meta property=\"og:image:height\" content=\"1081\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Make a Responsive Page On WordPress - Side By Side Columns - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/how-to-make-a-responsive-page-on-wordpress-side-by-side-columns\/","og_locale":"en_US","og_type":"article","og_title":"How to Make a Responsive Page On WordPress - Side By Side Columns - Academy","og_description":"Overview Transcript Overview 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. Transcript hi welcome to elemental house next question comes from Karthik yeah how can i display [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-make-a-responsive-page-on-wordpress-side-by-side-columns\/","og_site_name":"Academy","article_published_time":"2021-06-23T07:50:23+00:00","article_modified_time":"2023-02-21T10:47:58+00:00","og_image":[{"width":1923,"height":1081,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Make-a-Responsive-Page-2.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-make-a-responsive-page-on-wordpress-side-by-side-columns\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-make-a-responsive-page-on-wordpress-side-by-side-columns\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Make a Responsive Page On WordPress &#8211; Side By Side Columns","datePublished":"2021-06-23T07:50:23+00:00","dateModified":"2023-02-21T10:47:58+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-make-a-responsive-page-on-wordpress-side-by-side-columns\/"},"wordCount":242,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-make-a-responsive-page-on-wordpress-side-by-side-columns\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Make-a-Responsive-Page-2.jpg","keywords":["Guides and Tutorials"],"articleSection":["Responsive"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-make-a-responsive-page-on-wordpress-side-by-side-columns\/","url":"https:\/\/elementor.com\/academy\/how-to-make-a-responsive-page-on-wordpress-side-by-side-columns\/","name":"How to Make a Responsive Page On WordPress - Side By Side Columns - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-make-a-responsive-page-on-wordpress-side-by-side-columns\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-make-a-responsive-page-on-wordpress-side-by-side-columns\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Make-a-Responsive-Page-2.jpg","datePublished":"2021-06-23T07:50:23+00:00","dateModified":"2023-02-21T10:47:58+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-make-a-responsive-page-on-wordpress-side-by-side-columns\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-make-a-responsive-page-on-wordpress-side-by-side-columns\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-make-a-responsive-page-on-wordpress-side-by-side-columns\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Make-a-Responsive-Page-2.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Make-a-Responsive-Page-2.jpg","width":1923,"height":1081},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-make-a-responsive-page-on-wordpress-side-by-side-columns\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Responsive","item":"https:\/\/elementor.com\/academy\/responsive\/"},{"@type":"ListItem","position":4,"name":"How to Make a Responsive Page On WordPress &#8211; Side By Side Columns"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2995","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=2995"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2995\/revisions"}],"predecessor-version":[{"id":9395,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2995\/revisions\/9395"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4113"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=2995"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=2995"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=2995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}