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

Enhance Card Image Responsiveness on Small Screens (#327) #354

Closed
wants to merge 5 commits into from

Conversation

dipexplorer
Copy link

@dipexplorer dipexplorer commented Oct 25, 2024

What does this PR do?
This PR improves the responsiveness of the card image on small screens to maintain a balanced layout, fixing layout issues on mobile devices where the image covers excessive space.
Fixes #327.

How should this be tested?
Test 1: Resize browser window below 750px width and verify the card image resizes proportionately to maintain a balanced layout.
Test 2: Check that the image and other card elements adjust without causing overflow or unbalanced space on smaller screens.

Checklist

  • Filled out the "How to test" section in this PR
  • Read Contributing guide
  • Self-reviewed my own code
  • Checked for warnings, there are none
  • Removed all console.logs
  • The changes don’t cause any responsiveness issues

Copy link

netlify bot commented Oct 25, 2024

Deploy Preview for delightful-daifuku-a9f6ea ready!

Name Link
🔨 Latest commit
🔍 Latest deploy log https://app.netlify.com/sites/delightful-daifuku-a9f6ea/deploys/672280a38dba5532e7d11a45
😎 Deploy Preview https://deploy-preview-354--delightful-daifuku-a9f6ea.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 @dipexplorer 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.

@dipexplorer
Copy link
Author

Hi @AlfiyaSiddique ,

I have completed the necessary changes and requested reviews, but it appears that the pull request is blocked automaticaly. I want to ensure I follow the proper procedures and comply with the repository's rules.

Could you please provide guidance on what steps I should take to move forward? or is there anything else I might need to address to get this PR approved?

frontend/index.html Outdated Show resolved Hide resolved
@AlfiyaSiddique
Copy link
Owner

@dipexplorer one comment

@AlfiyaSiddique
Copy link
Owner

And @dipexplorer how did you approve changes in issue #310 ??

@dipexplorer
Copy link
Author

And @dipexplorer how did you approve changes in issue #310 ??

I approved the PR unconditionally by mistake. Sorry for the oversight—I’ll be more careful moving forward.

@AlfiyaSiddique
Copy link
Owner

Also please update the PR

@dipexplorer
Copy link
Author

Also please update the PR

@AlfiyaSiddique ,
Could you explain to me why my PR hasn't been merged yet?

@AlfiyaSiddique
Copy link
Owner

@dipexplorer above I have asked you to move the styles to CSS file that you have not done yet that's why!
image

Copy link
Author

@dipexplorer dipexplorer left a comment

Choose a reason for hiding this comment

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

fixing css conflict

@AlfiyaSiddique
Copy link
Owner

@dipexplorer please update your pr there are new changes which is not reflecting on this PR

@AlfiyaSiddique
Copy link
Owner

Like the footer

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

ENHANCEMENT: Card Image Covers Large Screen Area on Small Devices
2 participants