Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed Background Image Visibility Issue on Profile Card (#31) #375

Conversation

syedfardeenjeelani
Copy link

What does this PR do?

This PR fixes the issue where the background images (bg-top and bg-bottom) on the profile card disappear or become less visible on smaller screens. The issue is addressed by resizing the background images using vw units and adjusting their position to ensure visibility across different viewport sizes.

Fixes #31

Type of change

  • Bug fix (non-breaking change which fixes an issue)

How should this be tested?

  1. Open the profile card on various screen sizes (desktop, tablet, mobile).
  2. Verify that the background images remain visible and proportionate as the screen size reduces.
  3. Check for any visual regressions on larger screens.
  • Test A: Check visibility of bg-top and bg-bottom images on a mobile screen (max-width: 375px).
  • Test B: Validate responsiveness and layout on a tablet (max-width: 768px).

Mandatory Tasks

  • Make sure you have self-reviewed the code. A decent size PR without self-review might be rejected.

Copy link

netlify bot commented Oct 15, 2024

Deploy Preview for openfrontendmentor ready!

Name Link
🔨 Latest commit 3520931
🔍 Latest deploy log https://app.netlify.com/sites/openfrontendmentor/deploys/670f673893f80200083e2aa4
😎 Deploy Preview https://deploy-preview-375--openfrontendmentor.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Thank you @syedfardeenjeelani for your contribution! Your pull request has been submitted successfully. A maintainer will review it as soon as possible. We appreciate your support in making this project better

Copy link
Collaborator

@beRajeevKumar beRajeevKumar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@syedfardeenjeelani, Now background images are not working on mobile devices, so make some changes please then I will merge your branch.

@beRajeevKumar beRajeevKumar added bug Something isn't working good first issue Good for newcomers hacktoberfest Contribute for Hacktoberfest gssoc-ext gssoc level1 Easy Level hacktoberfest-accepted Hacktoberfest Accepted labels Oct 15, 2024
@syedfardeenjeelani
Copy link
Author

@syedfardeenjeelani, Now background images are not working on mobile devices, so make some changes please then I will merge your branch.

sure

@syedfardeenjeelani
Copy link
Author

@beRajeevKumar kindly review my pr

@syedfardeenjeelani
Copy link
Author

@beRajeevKumar please review my pr

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working good first issue Good for newcomers gssoc gssoc-ext hacktoberfest Contribute for Hacktoberfest hacktoberfest-accepted Hacktoberfest Accepted level1 Easy Level
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Fix Background image in "08-profile-card" project while testing responsive.
2 participants