Hello @Wael-Orraby, Good work getting the Javascript Functionality working well !
I've got a small recommendation on the CSS, for a more consistent user experience, particularly regarding the resizing issue you're encountering with new quotes, consider the following modifications:
.container Width Adjustment:
On smaller screens, it might be beneficial to set the .container width to 90%. For larger screens, a fixed width, say 500px, can prevent the container from resizing every time a new quote is fetched. This ensures a consistent width across different quotes, enhancing user experience. However, keeping the height flexible is a good call, allowing it to adjust based on the quote's length.
Body Height:
Also I'd recommend setting the body height to 100vh. Currently, it's set to 96vh, but using the full viewport height ensures that the layout utilizes the entire visible screen area.
I hope these suggestions enhance the responsiveness and appearance of your design. Let me know if you'd like any further clarifications or feedback.
Marked as helpful