The newsletter popup is designed with a width of 100% to ensure it fills the entire screen. This allows for maximum visibility and impact. The object-fit: cover property ensures that the image within the popup fits perfectly without distortion.
The popup text is carefully crafted to provide clear and concise information. With a margin of 1rem at the top and bottom and 0 on the sides, it gives a balanced look. The font-weight of 400 and line-height of 1.5 make the text easy to read.
The input field for entering information, #input_53_1, is designed with a padding of 10px 11px to provide enough space for users to enter their details. The submit button is also styled with padding of 10px 11px and a margin-top of 1rem for easy clickability. The border-radius of 4px gives it a sleek and modern look.
The popmake-close button is designed with padding of 8px 10px and a font-weight of 700 for a prominent appearance. The border-radius of 24px adds a touch of elegance to the close button.
When it comes to small screens, the newsletter popup is optimized to fit within 90% of the screen width. This ensures that users on mobile devices can still access and interact with the popup easily.
The responsive design ensures that the elements within the popup adjust appropriately based on the screen size, providing a seamless user experience across all devices.