In the Shlokas tab on mobile, clicking 'Read' generates a random shloka, but the 'New Quote' button overlaps with the background, obscuring the verse's source. This impedes user understanding and navigation.
To address this issue, I modified the CSS styling in the shlokas_page/motivation.css file. Specifically, I adjusted the .text class by changing the font-size property from 2rem to 1.5rem. This change reduces the font size, ensuring that the 'New Quote' button no longer overlaps with the background, improving the readability and layout of the shloka's source.
Screenshots
[Screenshot of the issue]
[Screenshot of the solution]
Checklist
[x] My code adheres to the established style guidelines of the project.
[x] I have included comments in areas that may be difficult to understand.
[x] My changes have not introduced any new warnings.
Related Issue
Closes: #1524
Description
In the Shlokas tab on mobile, clicking 'Read' generates a random shloka, but the 'New Quote' button overlaps with the background, obscuring the verse's source. This impedes user understanding and navigation.
To address this issue, I modified the CSS styling in the
shlokas_page/motivation.cssfile. Specifically, I adjusted the.textclass by changing thefont-sizeproperty from2remto1.5rem. This change reduces the font size, ensuring that the 'New Quote' button no longer overlaps with the background, improving the readability and layout of the shloka's source.Screenshots
[Screenshot of the issue]
[Screenshot of the solution]
Checklist