Setting the viewport
The viewport is the visible area of a web page for the user. It differs based on the device, smaller on mobiles and larger on computers. Include the <meta> element below on all pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This instructs the browser on how to manage page dimensions and scaling. ‘width=device-width’ adapts the page width to the device screen, and ‘initial-scale=1.0’ sets the initial zoom level when the page loads.
HTML Head Element
The HTML <head> element acts as a container for crucial metadata that defines the document’s essential attributes. Positioned between the <html> and <body> tags, elements such as <title>, <style>, <meta>, <link>, <script>, and <base> are wrapped inside The HTML <head> element. Additionally, The information contained by the <head> element is not displayed by the browser on the web page.