Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hey there,
This is my first post on here, i am not new to development but i am new to the world of laravel. I was following along day 4 of the learn laravel video series when i encountered the following issue.
Layout.blade.php
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.tailwindcss.com" ></script>
</head>
<body class="h-full">
//REPLACED THIS PART TO SAVE SPACE
//TAILWIND DASHBOARD COPY PASTE tailwindui website/components/application-ui/application-shells/stacked
//TWO VARIABLES {SLOT , HEADING}^^
</body>
</html>```
about.blade.php
<x-layout>
<x-slot:heading>
About
</x-slot:heading>
<h1>Welcome to the about page</h1>
</x-layout>
contact.blade.php
<x-layout >
<x-slot:heading>
Contact
</x-slot:heading>
<h1>Welcome to the contact page</h1>
</x-layout>
home.blade.php
<x-layout>
<x-slot:heading>
Home
</x-slot:heading>
<h1>Welcome to the home page</h1>
</x-layout>
of the 3 pages, only 1 loads correctly, the home.blade.php. The other two display a strange gap at the top of the page presenting as a white bar.
I would think the way the templating works and the code is, all should look the same.
However after doing some digging i found that the broken ones (about and contact) all have this strange artifact when i open dev tools that when deleted in dev tools makes the issue go away."" on top of the body. whats strange is, the home.blade.php file does not show this in dev tools when inspected.
ive searched for this symbol in my IDE and have not found it anywhere. im not sure what is causing this behaviour.I wish i could post pictures on here to show, but im not sure how to.... not sure if this is a noob question. but i promise web dev is my day job.
thank you
Its a zero width character or byte order Mark (BOM)
Try copying the the contents of the file, paste it into notepad then copy and paste it back again.
What editor do you use, and did you use a different editor when you first created the files?
Hey thanks for the reply Snapey,
I am using PHPstorm. Tried copy pasting into notepad then back into editor. Same editor throughout. Issue persists. in about and contact pages.
edit:
occurs in incognito with all browser extensions disabled as well. searching entire solution for ^\xEF\xBB\xBF with regex checked yielded no results searching entire solution for  with regex disabled yielded no results
@Snapey no luck here aften searching with plugin and regex,no results being reported. i wonder if tailwind maybe via CDN.
i did investigate further.
the two bad files have the following, meta tags within the body tag when inspecting in dev tools.keeping in mind the template code for all these pages all come from the same layout.
///BAD
<head></head>
<body class="h-full">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
<div class="min-h-full"></div>
</body>
</html>
///END BAD
//whereas the good view does not
///START GOOD
```<html lang="en" class="h-full bg-gray-100" >
<head></head>
<body class="h-full">
<div class="min-h-full">
<nav class="bg-gray-800"></nav>
<header class="bg-white shadow">
<div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8"></div>
</header>
<main></main>
</div>
</body>
</html>```
///END GOOD
Zero width character bugs are notoriously hard to find, i will continue with the course as is. Please do not worry about this issue, i do not wish to take further use of your time. Thank you
@Shinobu-Kazahana its strange also because your meta tags, which should be in the section appear in the body or not at all.
Please or to participate in this conversation.