Blog UI layout issues: overlapping links, broken spacing, and wasted screen width #885
Description
#Describe the bug
The blog page UI has layout issues where links and text overlap with images, and content does not flow correctly. The page also wastes a large portion of horizontal screen space on desktop, making the layout look broken and unbalanced.
#To Reproduce
Steps to reproduce the behavior:
1.Go to the Cyclops website.
2.Navigate to the Blog page.
3.Scroll down through the list of blog posts.
4.Observe overlapping text/links with images and inconsistent spacing between sections.
#Expected behavior
Blog cards should follow normal document flow without overlapping text or images.
Content should be properly spaced vertically and make effective use of available screen width on desktop devices.
Screenshots
Screenshots attached showing overlapping links, broken spacing, and unused screen area.
#Desktop:
OS: Windows 11
Browser: Chrome / Edge
Version: Latest stable
#Additional context
This issue appears to be caused by improper layout handling, possibly due to fixed heights or absolute positioning used for primary content elements. Refactoring the blog layout using proper Flexbox or CSS Grid and removing fixed positioning for content blocks should resolve the issue.
I would like to work on fixing this issue. Please assign this issue to me if no one else is currently working on it. I am happy to submit a PR with the required layout and CSS fixes.