{"id":851,"date":"2022-08-16T14:32:24","date_gmt":"2022-08-16T14:32:24","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2022\/08\/16\/6475658-hostinger-website-builder-how-to-edit-the-mobile-version-of-a-website\/"},"modified":"2026-08-27T11:45:27","modified_gmt":"2026-08-27T11:45:27","slug":"6475658-hostinger-ai-builder-manual-mode-how-to-edit-the-mobile-version-of-a-website","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/6475658-hostinger-ai-builder-manual-mode-how-to-edit-the-mobile-version-of-a-website\/","title":{"rendered":"Hostinger AI Builder: How to edit the mobile version of a website in manual mode"},"content":{"rendered":"<p class=\"no-margin\">By default, <b>the mobile website&rsquo;s version displays elements in the order they&rsquo;ve been added to the desktop version<\/b>. Even if you, later on, reorder elements on the desktop, these changes are not automatically applied to the mobile version. You can sort elements on the mobile view manually. This way, you can lay out elements differently on desktop and mobile views.<\/p><p class=\"no-margin\"><b>NOTE<\/b><\/p><ul>\n<li>\n<p class=\"no-margin\">If you <b>delete<\/b> an element or a section on the desktop view, it&rsquo;s also automatically removed from the mobile view and vice versa<\/p>\n<\/li>\n<\/ul><h2 id=\"h_84ae76797e\">Access the mobile editor<\/h2><p class=\"no-margin\">Switch between the views by clicking on the <b>mobile <\/b>or <b>desktop <\/b>icon in the upper toolbar:<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" class=\"alignnone size-full wp-image-17029\" src=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-26_16-48_1.png\" alt=\"\" width=\"1907\" height=\"152\" srcset=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-26_16-48_1.png 1907w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-26_16-48_1-300x24.png 300w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-26_16-48_1-1024x82.png 1024w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-26_16-48_1-768x61.png 768w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-26_16-48_1-1536x122.png 1536w\" sizes=\"(max-width: 1907px) 100vw, 1907px\" \/><\/div><h2 id=\"h_227f80b96b\">Auto-fix layout<\/h2><p class=\"no-margin\">After making any changes to the desktop version, the option <b>Auto-fix layout<\/b> appears in the corresponding section on the mobile version:<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" class=\"alignnone size-full wp-image-17282\" src=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_18-27.png\" alt=\"\" width=\"735\" height=\"633\" srcset=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_18-27.png 735w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_18-27-300x258.png 300w\" sizes=\"(max-width: 735px) 100vw, 735px\" \/><\/div><p class=\"no-margin\">Once you click on the button, the <b>mobile layout is forced to follow specific positioning rules based on the desktop layout<\/b>.<\/p><p class=\"no-margin\">The mobile auto-positioning is automatically turned off once you make any manual edits on the mobile version.<\/p><h2 id=\"h_c225f9a91c\">Sort elements<\/h2><p class=\"no-margin\">To reposition elements, enter the mobile view and drag and drop elements.<\/p><p data-start=\"245\" data-end=\"386\">To move multiple elements, click and hold your cursor, then drag over the elements you want to select:<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2025\/08\/sortelement.gif\" alt='Portfolio site with large headline \"Jamie Maislinger Photography\" and a snowboarder photo sidebar' data-media-id=\"5563\"><\/div><h2 id=\"h_b8ddcb2c8f\">Resize elements<\/h2><p class=\"no-margin\">To resize elements, enter the mobile view and use the resizing handles on the element borders:<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2025\/08\/resizeelement.gif\" alt=\"Website editor showing a highlighted snowboard action photo on a portfolio homepage\" data-media-id=\"5560\"><\/div><div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">\n<p class=\"no-margin\">Learn more: <b><a class=\"intercom-content-link\" href=\"\/support\/6491230-website-builder-how-to-resize-elements-and-sections\/\" target=\"_blank\" rel=\"noopener\">How to Resize Elements and Sections<\/a><\/b><\/p>\n<\/div><h2 id=\"h_1c221fb0d5\">Resize text<\/h2><p class=\"no-margin\">You can resize text in two ways:<\/p><ul>\n<li>\n<p class=\"no-margin\">Globally &ndash; affects <b>all texts of a particular style<\/b> (e.g., all texts written in Heading 1) all across your website on the mobile view<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Locally &ndash; affects a <b>particular text element <\/b>on the mobile view<\/p>\n<\/li>\n<\/ul><p class=\"no-margin\">To resize text <b>globally<\/b> on mobile, enter the mobile view and change the font size of a particular text style in the <b><a class=\"intercom-content-link\" href=\"\/support\/6463286-website-builder-how-to-change-text-style\/\" target=\"_blank\" rel=\"noopener\">global text style settings<\/a><\/b>:<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2025\/08\/resizetext.gif\" alt=\"Website editor showing Jamie Maislinger photography homepage with large hero text and snowboarder photo\" data-media-id=\"5561\"><\/div><p class=\"no-margin\">To resize text <b>locally<\/b> on mobile, enter the mobile view, click on a particular text element, and change its font size:<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/pt\/support\/wp-content\/uploads\/sites\/59\/2022\/12\/dd836c9f-d33c-45d0-bb85-eafa21853476.gif\" alt=\"Changing text size locally in Hostinger Website Builder\"><\/div><div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">\n<p class=\"no-margin\">You can set the following settings to be different on desktop and mobile:<\/p>\n<ul>\n<li>\n<p class=\"no-margin\"><b>Font size<\/b>, e.g., 20 PX (desktop) and 18 PX (mobile)<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Text alignment<\/b>, e.g., left (desktop) and center (mobile)<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Line height<\/b>, e.g., 2 (desktop) and 1.5 (mobile)<\/p>\n<\/li>\n<\/ul>\n<\/div><p class=\"no-margin\">It means that once you change any other parameter &ndash; font family, bold, italic, underline, etc. &ndash; the change will reflect on both desktop and mobile. The same happens if you change the whole text style, e.g., if you set Heading 2 for mobile while it&rsquo;s Heading 1 on desktop, the text element in the desktop view will change to Heading 2, too.<\/p><p class=\"no-margin\">You may <b>duplicate <\/b>an element or section<b> <\/b>and <b>make one version visible on desktop and another one visible on mobile devices<\/b>. This way, you get more freedom when styling the content on desktop and mobile individually, as, normally, some settings (e.g., text style) apply to both desktop and mobile. Learn more: <b><a class=\"intercom-content-link\" href=\"\/support\/6721428-website-builder-how-to-hide-elements-and-sections\/\" target=\"_blank\" rel=\"noopener\">How to Hide Elements and Sections<\/a><\/b><\/p><h2 id=\"h_8289bbc5f8\">Change the menu position<\/h2><p class=\"no-margin\">To change the position of the burger menu, enter the mobile view, click on the <b>header<\/b> section, and click <b>Edit header<\/b>:<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" class=\"alignnone size-full wp-image-17283\" src=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_18-31.png\" alt=\"\" width=\"754\" height=\"609\" srcset=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_18-31.png 754w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_18-31-300x242.png 300w\" sizes=\"(max-width: 754px) 100vw, 754px\" \/><\/div><p class=\"no-margin\">In the <b>Layout <\/b>tab, change the menu position:<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" class=\"alignnone size-full wp-image-17284\" src=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_18-34.png\" alt=\"\" width=\"857\" height=\"855\" srcset=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_18-34.png 857w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_18-34-300x300.png 300w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_18-34-150x150.png 150w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_18-34-768x766.png 768w\" sizes=\"(max-width: 857px) 100vw, 857px\" \/><\/div><div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">\n<p class=\"no-margin\">If you can&rsquo;t see the header section, it&rsquo;s likely that all your website pages are<b> <a class=\"intercom-content-link\" href=\"\/support\/6456821-website-builder-hiding-a-page-from-the-menu-bar\/\" target=\"_blank\" rel=\"noopener\">hidden from the navigation menu<\/a>&nbsp;<\/b><\/p>\n<\/div><h2 id=\"h-how-to-position-elements-on-mobile-view\">How to position elements on mobile view<\/h2><p class=\"no-margin\">To achieve the best results while editing the mobile version of your website, <b>avoid moving elements between sections<\/b>. Moving any elements from one section to the other affects both mobile and desktop versions and may distort your website&rsquo;s layout.<\/p><p class=\"no-margin\">Instead, reposition elements within a section. To reposition elements, enter the mobile view and drag and drop elements:<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2025\/08\/4.gif\" alt=\"Portfolio website editor with &ldquo;Publish website&rdquo; button and a snowboarder photo on the page\" data-media-id=\"5554\"><\/div><div>\n<div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">For more on how your website automatically adapts across screen sizes, see<a href=\"https:\/\/www.hostinger.com\/support\/6466243-hostinger-website-builder-responsive-web-design-and-image-size\/\"> responsive web design and image size<\/a>.<\/div>\n<p class=\"no-margin\">\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Customize the mobile version of your Hostinger AI Builder manual mode website separately from desktop.<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[293],"tags":[],"class_list":["post-851","post","type-post","status-publish","format-standard","hentry","category-ai-builder"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/6475658-hostinger-website-builder-how-to-edit-the-mobile-version-of-a-website\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/support\/6475658-hostinger-creador-de-sitios-web-como-editar-la-version-movil-de-un-sitio-web\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/support\/6475658-createur-de-sites-web-comment-modifier-la-version-mobile-d-un-site-web-chez-hostinger\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/support\/6475658-hostinger-website-builder-cara-edit-website-versi-mobile\/","default":0},{"locale":"lt-LT","link":"https:\/\/www.hostinger.com\/lt\/support\/6475658-hostinger-svetainiu-kurimo-irankis-kaip-redaguoti-mobiliaja-svetaines-versija\/","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/support\/6475658-hostinger-criador-de-sites-como-editar-a-versao-movel-do-seu-site\/","default":0},{"locale":"uk-UA","link":"https:\/\/www.hostinger.com\/ua\/support\/6475658-hostinger----\/","default":0}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/851","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/comments?post=851"}],"version-history":[{"count":12,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/851\/revisions"}],"predecessor-version":[{"id":17285,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/851\/revisions\/17285"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=851"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=851"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}