I am currently working on an application using Symfony, and I have implemented a basic confirmation email with minimal CSS styling. However, the email template is causing horizontal scrolling due to the layout.
Below is the HTML code of my email template:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GeoSport Authenticator</title>
</head>
<body style="box-sizing: border-box; max-width: 100%; overflow-x: hidden">
<div>
<h1 style="margin: 5px 0; text-align: center;">
GeoSport
</h1>
<div style="text-align: center; border: 2px solid lightblue; background-color: rgb(189, 221, 231); padding: 10px;
margin: 0 auto; width: 75vw; border-radius: 10px;">
<h2 style="margin: 15px 0;">
Welcome to GeoSport!
</h2>
<p>Please confirm your email by clicking the button below:</p>
<p class="link">
<a style="display: inline-block; padding: 5px; border: 1px solid black; background-color: black;
text-decoration: none; border-radius: 10px; color: white;" href="{{ signedUrl|raw }}">
Confirm My Email
</a>
</p>
<p>This link will expire in 1 hour.</p>
<p>Greetings!</p>
</div>
</div>
</body>
The mobile view of the email displays correctly, but when opened on a PC, there is horizontal scrolling. Why does this occur?
Email on PC: https://i.stack.imgur.com/slLrX.jpg