Common mistakes and how to avoid them
Web development can sometimes be tricky, with certain issues appearing to come out of nowhere and causing quite a headache. In this guide we'll look at some of the most frequent user errors and how to address them, ensuring your web projects run smoothly and look great across all devices.
Incorrect use of margins
While negative margins have their place in creating specific layouts, they often result in overlapping elements and unexpected behaviour on different screen sizes if not used correctly. We'll guide you on how to use them effectively while avoiding common pitfalls.
Using negative margins to reduce space between elements.
👎 Incorrect approach: Element A has margins of 20px surrounding it, and Element B has margins of 20px surrounding it, causing a 40px gap between the two elements. But, let’s say the user wants a result of only 5px of space between Element A and Element B. The user will sometimes apply a -35px margin to close the gap. Anytime negative margins are used you’re essentially overlapping elements, which can cause issues on mobile display, inconsistencies in various screen sizes, and clickable elements being overlapped so they can no longer be clicked. So we now can see why this is the wrong method.
👍 Correct approach: In the example above, the user should reduce Element A to 2.5px and Element B to 2.5px, giving a total gap of 5px between the two elements. It’s that simple. Instead of applying your margins only to the element you’re moving at that moment, apply them to both elements involved in the task at hand. This eliminates negative margins and keeps better control overall of the elements structure.
Using margins to align elements with other elements.
👎 Incorrect approach: A user wants to centre-align an image in a left column with the text in a right column and uses either negative or positive margins to try and position the image center. Although, this may work on the user's screen at the time, when another user visits the page on their screen, it would no longer be aligned correctly.
👍 Correct approach: In the row, apply ‘Equalize Columns’ and set your vertical alignment. If you want everything aligned in the centre vertically, then set vertical and everything will align to the centre of the column, which will match the height of all columns within that row. This is responsive design that will adjust accordingly to the screen size.
Copying and pasting incomplete code snippets
Here we’ll tackle problems that arise from pasting incomplete HTML code snippets. Whether it’s a missing closing tag or a partial structure, these issues can cause significant functionality and display errors on your page.
👎 Incorrect approach: Although simple to avoid, this is a common issue. A user highlights a snippet of code being provided to them by a 3rd party provider (eg. Google Analytics, HotelMaps.com, Marketo…) but doesn’t highlight the entire piece of code. This will always be caused by a user not ensuring the entire piece of code is copied from the source.
Incorrect Example: <iframe width="560" height="315" src="https://www.youtube.com/embed/C8ejLNTale0?si=Hy9823DwwHkO7QqV" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></ifra
In this example, the end of the code does NOT have a closing bracket, or even a complete closing tag.
👍 Correct approach: Simply ensure that the entire snippet of code being provided by the 3rd party provider is complete, and should always begin with an opening bracket “<” and end with a closing bracket “>”. Think about when you might copy and paste a password. If even one character is missing or incorrect, the password will not work. It’s exactly the same with code.
Correct example: <iframe width="560" height="315" src="https://www.youtube.com/embed/C8ejLNTale0?si=Hy9823DwwHkO7QqV" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
In this example of the same code as previously but now complete, the end of the snippet includes a complete closing tag and bracket.
Parent page deleted without updating the child pages
Let’s address the scenario where a parent page is deleted. This sometimes results in its child pages taking on the deleted parent’s slug, leading to navigation errors and confusion.
👎 Incorrect approach: A user deletes a page from EE CMS without confirming if it is a parent page that has child pages under it. This results in the child pages not being assigned a new parent page or having a parent page removed from the child page altogether, thus making it a normal page without a hierarchy.
When a page is removed that is being used as a parent page, it causes the URL of the child pages to reflect the deleted page and the URL structure consisting of the deleted page slug/permalink.
Example child URL after parent deletion: https://domain.com/somepage__trashed/another-page/
👍 Correct approach: When deleting a page on your site, first confirm that it doesn’t have child pages under it. You can easily do this from the ‘Pages’ section in the backend of the website. If there are no pages in a hierarchy under the page to be deleted then it’s free to delete. If there are child pages under the page, first update the parent page of the child pages or remove the parent page from the child pages entirely.
Checking your HTML is properly closed
Update: We've released a full article on this issue along with how-to video here.
For users adding HTML in EE Builder modules, the page can become broken when HTML tags are opened but not closed properly. This is a common issue that can lead to broken layouts and dysfunctional modules.
👎 Incorrect approach: When wrapping text or using HTML within a module you will always have an opening tag (ie, <strong>) and a closing tag (ie, </strong>). Users will often use an opening tag without a closing tag or try to close the code with an additional opening tag.
Another issue, which is just unnecessary code, is repeating the opening tag with its attributes when closing it.
Example of double opening tag: <strong>Here’s my bolded text<strong>
Example of no closing tag: <strong>Here’s my bolded text
Example of repeating attributes in closing: <strong style=”color:red;”>Here’s my red bolded text</strong style=”color:red;”>
👍 Correct approach: Always ensure that any code is wrapped with an opening and closing tag. A closing tag will always begin with “</” and never be identical to the opening tag.
Example of double opening tag: <strong>Here’s my bolded text</strong>
Example of no closing tag: <strong>Here’s my bolded text</strong>
Example of repeating attributes in closing: <strong style=”color:red;”>Here’s my red bolded text</strong>