fix: mobile layout collision in header and services list (fixes #3294)

[sarbojitrana]

Title: fix: responsive layout breakdown on mobile screens (Hero & Services)

Description

This PR addresses the responsive design issues reported in keploy/keploy#3294, where UI elements were colliding and overlapping on tablet and mobile viewports (500px - 900px).

The Fixes:

Hero Section: The .home-social icons were using absolute positioning (right: 5.4rem), causing them to float on top of the content on smaller screens. I added a media query to switch them to a relative Flexbox layout on mobile.

Evaluation Criteria: The .services-list text had a negative top margin (-20px), which caused text to overlap with the numbering icons when the layout stacked vertically. I forced a margin reset in the mobile media query.

Fixes keploy/keploy#3294

Type of change

[x] Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?
I tested the layout changes locally using a Python HTTP server to ensure the DOM elements flow correctly without collision.

Test Environment: Arch Linux / Chrome & Firefox DevTools

Steps to Reproduce:

Run python3 -m http.server 8000 in the root directory.

Open http://localhost:8000.

Resize the browser viewport to 600px (Mobile width).

Verified that Social Icons now sit below the hero text.

Verified that "Evaluation Criteria" text sits below the number icons (1, 2, 3) without overlap.

Screenshots :

Before Fix

After Fix

Checklist:
[x] My code follows the style guidelines of this project

[x] I have performed a self-review of my own code

[x] I have commented my code, particularly in hard-to-understand areas

[ ] I have made corresponding changes to the documentation

[x] My changes generate no new warnings

[ ] I have added tests that prove my fix is effective or that my feature works

[ ] New and existing unit tests pass locally with my changes

[ ] Any dependent changes have been merged and published in downstream modules

[x] I have checked my code and corrected any misspellings

[ ] I have tagged the reviewers in a comment below incase my pull request is ready for a review

[x] I have signed the commit message to agree to Developer Certificate of Origin (DCO) (to certify that you wrote or otherwise have the right to submit your contribution to the project.) by adding "--signoff" to my git commit command.

[github-actions]

Thank you and congratulations 🎉 for opening your very first pull request in writers-program

[sarbojitrana]

Hi Team,

I've submitted the fix for issue #3294.

It looks like the CLA Assistant workflow crashed immediately (failed after 5s) with an internal error, so it never posted the link for me to sign the CLA.

Could you please review the PR and manually handle the CLA check? The DCO check has passed.

[amaan-bhati]

Hey @sarbojitrana Thanks for raising this pr, can you please center align these two buttons and ensure that they are visible in all screen sizes?

[sarbojitrana]

@amaan-bhati
sure i'll work on it

[sarbojitrana]

Hey @amaan-bhati, I've updated the CSS to center the buttons and prevent horizontal scrolling on mobile. I also fixed the indentation error in the build_and_check workflow, so the CI build is passing now.

The CLA check is still failing, but it looks like an internal server error on the bot's side. Ready for review!

[amaan-bhati]

Hey @sarbojitrana Can you please take a look at the following?

• idts the header is supposed to be like that on smaller screen sizes, it only pops up when the hamburger is clicked

- the heading at the hero section gets lost above the bg image, can you please make it a little bolder or maybe add some low opacity bg that makes it easier to locate the description above the bg image. Also, the two buttons are still not visible on smaller screen sizes, kindly test it on 3-4 devices on the inspect tab to ensure that the buttons are visible

- there are issues with the padding inside of a few buttons

- elements overlapping

[sarbojitrana]

Hey @amaan-bhati thanks for the detailed feedback! I've pushed the fixes and tested on multiple device's resolutions.






Please let me know if there is anything else that needs to be looked on.

[amaan-bhati]

Hey @sarbojitrana Thanks for the updates, most of it looks good to me now. I think only a bunch of finishing touch is left and then we are good to merge. Can you please take a looka at the following:

• the heading is partially underligned, i think the underline should be removed from the 'writers-program' written, also the image behind gets cut from the top.

• the social dock next to the menu hamburger is not reallly required, we can remove it because the socials are visible on the hamburger drop down anyways

- `menu` written next to the hamburger is not really required since the hamburger it self is explanatory as the menu button

- the footer section is not centrally alligned with respect to other sections and the buttons

most of the things that were breaking are fixed now, we are goofd merge after these changes, good work.

[sarbojitrana]

Hi @amaan-bhati , i've fixed the suggestions you gave in the review. please check it out

[amaan-bhati]

Hey @sarbojitrana Thanks for the update, most of the things are fixed now, you have covered every requested change now. The only edge case we should be careful about is the hero section button in smaller devices like the iphone se, the button is getting cut from the buttom in case of that particular device, it might happen for the devices with similar dimension, i have attached a refernce screenshot for the same:

[sarbojitrana]

fixed it and tested for multiple screens

[amaan-bhati]

hey @sarbojitrana thanks for the update, everything looks fine to me, great that we covered most of the responsiveness issues, everything looks good to me⚡. thanks for contributing, kudos to you.🚀