Next.js Landing Page CSS Optimization
Budget: £20 – £250 GBP
I’ve developed a landing page for my website using Next.js that includes animations and an email subscription feature. The page is mostly responsive across various devices, but I’m facing an issue where the email input field and subscribe button sometimes overlap with the logo on certain screen sizes, particularly on devices like the iPhone 15 Pro. I need help optimizing the layout to ensure that the design remains clean and functional across all devices.
Key Requirements:
• Review and optimize the responsiveness of the landing page, also focusing on mobile devices.
• Ensure the email input field and subscribe button do not overlap with other elements (e.g., logo) on various devices.
• Ensure the email input and subscribe button is always directly under the logo and and in the centre of the page.
• Ensure the logo and text is always in the centre of the page acrross all devices. If device is mobile / small width screen, ensure the text is below the logo
• Troubleshoot and fix any layout issues, specifically related to different screen sizes and orientations.
• Ensure all animations and UI elements are working smoothly without any visual glitches.
• Optimize the Next.js implementation, making sure the page loads efficiently across devices.
Project available on public GitHub Repo here: https://github.com/kieron-cairns/test-lm
Key Requirements:
• Review and optimize the responsiveness of the landing page, also focusing on mobile devices.
• Ensure the email input field and subscribe button do not overlap with other elements (e.g., logo) on various devices.
• Ensure the email input and subscribe button is always directly under the logo and and in the centre of the page.
• Ensure the logo and text is always in the centre of the page acrross all devices. If device is mobile / small width screen, ensure the text is below the logo
• Troubleshoot and fix any layout issues, specifically related to different screen sizes and orientations.
• Ensure all animations and UI elements are working smoothly without any visual glitches.
• Optimize the Next.js implementation, making sure the page loads efficiently across devices.
Project available on public GitHub Repo here: https://github.com/kieron-cairns/test-lm