Responsive E-learning landing page - HTML/CSS

Rating: ★★★★★

I recently had the opportunity to experience your website, and I must say that overall, it's been a great experience. The content, design, and usability are all praiseworthy. However, while exploring it on mobile screens, I noticed a minor issue that I believe could be improved for an even better user experience.

The problem I encountered is that the Call to Action (CTA) section on mobile screens appears too close to the footer.

To address this issue, I'd like to suggest a couple of methods that you can consider:

1. Adding Padding to the CTA Section: You can add a padding-bottom property to the CTA section when the screen width is less than 800px. This will create some separation between the CTA and the footer, making it more visually appealing and easier for users to interact with the CTA.

 @media screen and (max-width: 800px) {
       .cta {
           padding-bottom: 3rem;
       }
   }

2. Adding Padding to the Last Child of the Courses Container: Another approach is to add a padding-bottom property to the last child of the courses container when the screen width is less than 800px. This will introduce space between the last course and the footer, addressing the issue while maintaining consistency with your design.

 @media screen and (max-width: 800px) {
       .courses:last-child {
           padding-bottom: 3rem;
       }
   }

These solutions should help create a better visual hierarchy and user experience, particularly on mobile screens. Overall, you've done a great job with your website, and addressing this minor issue will make it even better. Keep up the good work!

I hope these suggestions are helpful, and I look forward to seeing the improvements on your website.