[OTHER]: Carousel images are not visible and are not properly aligned on small devices at sign-in/sign-up page

[sanjaraiy]

📝 Other Issue

Description
Carousel images are not visible and are not properly aligned on small devices at sign-in/sign-up page.

---

Type of Issue
Select the type of issue:

• [ ] 📄 Documentation
• [ ] 🛠️ Build/Deployment
• [ ] 🖼️ UI/UX Design
• [ ] ⚙️ Performance
• [x] Other (please specify) : Carousel visibility and alignment

---

Steps to Reproduce (if applicable)
If the issue is related to a problem, please provide the steps to reproduce it:

1. Go to the page with the carousel component.
2. Resize the browser window to a small screen size or access the page on a mobile device.
3. Scroll to the carousel section.
4. Observe that the images are not visible or are misaligned.

---

Expected Behavior/Outcome (if applicable)
Carousel images should be visible and properly aligned on all screen sizes, especially small devices such as mobile phones.

Additional Context

Environment (if applicable)
Provide relevant details about the environment where the issue occurred:

• Browser: Chrome 117.0
• Operating System: Windows 11
• Device: Laptop, Mobile and Tablet
• Other relevant environment details: Mi Notebook and Android device

Checklist

• [x] I have searched the existing issues, and this issue is not a duplicate.
• [ ] I have starred this repository.
• [x] I have provided all necessary details.

[github-actions[bot]]

Congratulations, @sanjaraiy! 🎉 Thank you for creating your issue for Rentalog. Your contribution is greatly appreciated and we look forward to working with you to resolve the issue. Keep up the great work! Should you have any queries or require guidance, do not hesitate to ask.

[AbhaySingh7007]

//Hide Carousel on Small Screens(If you want to hide the carousel entirely on small devices, you can use the following CSS) @media (max-width: 600px) { .carousel { display: none; / Hides the carousel on small screens / } } //Responsive Image Alignment .carousel img { width: 100%; / Makes images responsive / height: auto; / Maintains aspect ratio / }

@media (max-width: 600px) { .carousel { / Optionally adjust styles for small screens / padding: 0; / Adjust padding if needed / } } //If you need to adjust or initialize the carousel differently on small screens, you can use JavaScript if (window.innerWidth <= 600) { // Initialize or adjust carousel settings for small screens // Example: $('.carousel').slick('unslick'); to disable a slick carousel } //Make sure to test your changes across different devices and browsers to ensure everything looks good and functions as intended

[krishna7602]

assign me this task