{"id":888,"date":"2025-03-15T17:00:44","date_gmt":"2025-03-15T17:00:44","guid":{"rendered":"https:\/\/orkenyi.hu\/?p=888"},"modified":"2025-03-15T17:47:11","modified_gmt":"2025-03-15T17:47:11","slug":"whitespace-eltuntetes","status":"publish","type":"post","link":"https:\/\/orkenyi.hu\/en\/whitespace-eltuntetes\/","title":{"rendered":"White bar in phone view? Removing whitespace from websites"},"content":{"rendered":"<p>If you&#039;re viewing your website on a phone and see an annoying white bar or unnecessary gap, it&#039;s likely a <strong>whitespace (unnecessary blank space)<\/strong> You&#039;ve run into a problem. This often happens on mobile if your website isn&#039;t properly optimized. In this article, we&#039;ll show you how to quickly identify and fix this error.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. What causes the whitespace error?<\/h2>\n\n\n\n<p>The whitespace problem is usually caused by the following things:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Too large elements<\/strong>: The width of a given section or element is greater than the screen.<\/li>\n\n\n\n<li><strong>Long words or titles<\/strong>: For example, &quot;congestion prevention&quot;, if displayed in a font size that is too large, it may stick out to the edge of the mobile screen. <a href=\"https:\/\/dugulaselharitas-norbi.hu\/\" data-type=\"link\" data-id=\"https:\/\/dugulaselharitas-norbi.hu\/\">This is how we solved it for one of my clients!<\/a><\/li>\n\n\n\n<li><strong>Incorrect container size<\/strong>: The section or container is not properly constrained.<\/li>\n\n\n\n<li><strong>Drop-down menus or unnecessary margins<\/strong>: <a href=\"https:\/\/zdrone.hu\/\" data-type=\"link\" data-id=\"https:\/\/zdrone.hu\/\">On the website of a client of mine who sells industrial drones <\/a>(zdrone.hu) the menu items in the footer were too long, and these caused the whitespace error.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">2. How do you check what is causing the error?<\/h2>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Open the website in mobile view<\/strong>, or reduce the width of the window in your desktop browser.<\/li>\n\n\n\n<li><strong>Check the white stripes<\/strong>: If the page can be dragged sideways, then there is definitely an element sticking out.<\/li>\n\n\n\n<li><strong>Open your browser&#039;s developer tools (F12)<\/strong>, then click the \u201cElements\u201d tab.<\/li>\n\n\n\n<li><strong>Select a suspicious item<\/strong>, then the <strong>Find width in CSS<\/strong>If the overflow is not set correctly, the element may protrude.<\/li>\n\n\n\n<li><strong>If caused by long words or titles<\/strong>, then it is worth displaying them in a smaller font size or turning on text wrapping.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">3. How to fix the whitespace error?<\/h2>\n\n\n\n<p>If you find an element that sticks out, apply the following CSS code to it: <strong>Custom CSS<\/strong> section (or if you are using Elementor\/Bricks Builder editor, you can also set it for the given element).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>To fix the full page whitespace error:<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>html, body { overflow-x: hidden; max-width: 100%; }<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">4. Where to add the code?<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If you want it to be valid on all pages, then <strong>Place it in the header or footer<\/strong> the custom CSS code.<\/li>\n\n\n\n<li>If you&#039;re using Elementor, Bricks Builder, or another visual editor, you can also make the change in the CSS settings of the problematic element.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">5. What if these don&#039;t help?<\/h2>\n\n\n\n<p>If the above does not resolve the whitespace error, check the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Margin and padding settings<\/strong>: If a section has too much margin, reduce the values.<\/li>\n\n\n\n<li><strong>Flexbox or Grid settings<\/strong>: If the containers are next to each other, check that they are distributed properly.<\/li>\n\n\n\n<li><strong>Tests on mobile devices<\/strong>: Every mobile browser handles the display a little differently, it&#039;s worth trying it on multiple devices.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Summary<\/strong><\/h2>\n\n\n\n<p>Whitespace errors can cause a lot of headaches in mobile view, but a little <strong>They can be quickly fixed with a CSS change.<\/strong>.<\/p>\n\n\n\n<p><strong>Do you know what the mistake is?<\/strong> <br>Apply the appropriate CSS settings!<\/p>\n\n\n\n<p><strong>Can&#039;t you see what&#039;s wrong?<\/strong> <br>Check the width of the element with developer tools!<\/p>\n\n\n\n<p><strong>Still not working?<\/strong> <br>Experiment with margin, padding and overflow settings!<\/p>\n\n\n\n<p>With these methods, the white stripes will finally disappear from the mobile view! <\/p>\n\n\n\n<p>I was a little nervous, and I hope I was able to help you! If you have any more questions, <a href=\"https:\/\/orkenyi.hu\/en\/kapcsolat\/\" data-type=\"page\" data-id=\"40\">write to me<\/a>, and we&#039;ll solve your problem together. But if you&#039;re bored with editing your page, still come to me, because you know: <strong>Your successful website is my success!<\/strong> <\/p>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Ha weboldaladat telefonon n\u00e9zed, \u00e9s egy zavar\u00f3 feh\u00e9r cs\u00edkot vagy felesleges r\u00e9st l\u00e1tsz, akkor val\u00f3sz\u00edn\u0171, hogy egy whitespace (felesleges \u00fcres t\u00e9r) probl\u00e9m\u00e1ba \u00fctk\u00f6zt\u00e9l. Ez gyakran el\u0151fordul mobilon, ha a weboldal nincs megfelel\u0151en optimaliz\u00e1lva. Ebben a cikkben bemutatjuk, hogyan lehet gyorsan azonos\u00edtani \u00e9s kijav\u00edtani ezt a hib\u00e1t. 1. Mi okozza a whitespace hib\u00e1t? A whitespace probl\u00e9m\u00e1j\u00e1t [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":903,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"none","_seopress_titles_title":"Feh\u00e9r cs\u00edk telefonos n\u00e9zetben? Whitespace elt\u00fcntet\u00e9se","_seopress_titles_desc":"Megmutatom, hogy t\u00fcntesd el a zavar\u00f3 feh\u00e9r cs\u00edkot (whitespace) a weboldaladr\u00f3l. Egyszer\u0171 megold\u00e1sok \u00e9s CSS ha semmi sem seg\u00edt!","_seopress_robots_index":"","footnotes":""},"categories":[1],"tags":[],"temakor":[],"class_list":["post-888","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/orkenyi.hu\/en\/wp-json\/wp\/v2\/posts\/888","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/orkenyi.hu\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orkenyi.hu\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orkenyi.hu\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/orkenyi.hu\/en\/wp-json\/wp\/v2\/comments?post=888"}],"version-history":[{"count":8,"href":"https:\/\/orkenyi.hu\/en\/wp-json\/wp\/v2\/posts\/888\/revisions"}],"predecessor-version":[{"id":902,"href":"https:\/\/orkenyi.hu\/en\/wp-json\/wp\/v2\/posts\/888\/revisions\/902"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/orkenyi.hu\/en\/wp-json\/wp\/v2\/media\/903"}],"wp:attachment":[{"href":"https:\/\/orkenyi.hu\/en\/wp-json\/wp\/v2\/media?parent=888"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orkenyi.hu\/en\/wp-json\/wp\/v2\/categories?post=888"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orkenyi.hu\/en\/wp-json\/wp\/v2\/tags?post=888"},{"taxonomy":"temakor","embeddable":true,"href":"https:\/\/orkenyi.hu\/en\/wp-json\/wp\/v2\/temakor?post=888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}