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

fix: top and bottom padding of small preview card on mobile #974

Merged
merged 2 commits into from
Jan 11, 2023

Conversation

ayoayco
Copy link
Member

@ayoayco ayoayco commented Jan 11, 2023

Fix for the thumbnail appears not filling up the height of the small preview cards on mobile

before after
Screenshot 2023-01-11 at 5 04 12 PM Screenshot 2023-01-11 at 5 04 22 PM

@stackblitz
Copy link

stackblitz bot commented Jan 11, 2023

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@netlify
Copy link

netlify bot commented Jan 11, 2023

Deploy Preview for elk-docs canceled.

Name Link
🔨 Latest commit fba9e51
🔍 Latest deploy log https://app.netlify.com/sites/elk-docs/deploys/63bf07dcf89d920008ff469f

@ayoayco ayoayco self-assigned this Jan 11, 2023
@netlify
Copy link

netlify bot commented Jan 11, 2023

Deploy Preview for elk-zone ready!

Name Link
🔨 Latest commit fba9e51
🔍 Latest deploy log https://app.netlify.com/sites/elk-zone/deploys/63bf07dc4bded2000870b6ec
😎 Deploy Preview https://deploy-preview-974--elk-zone.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 settings.

@ayoayco ayoayco marked this pull request as ready for review January 11, 2023 16:08
@patak-dev
Copy link
Member

patak-dev commented Jan 11, 2023

@ayoayco I added the p4 because we need some padding for big cards
image

They should look like this:
image

@ayoayco
Copy link
Member Author

ayoayco commented Jan 11, 2023

Oh hmm yeah that doesn't look good without padding top/bottom

@ayoayco
Copy link
Member Author

ayoayco commented Jan 11, 2023

I will add a condition to handle big cards

@patak-dev
Copy link
Member

@ayoayco I think we also need the padding on small cards. On the bottom here there should be a bit more padding, no?

image

@ayoayco
Copy link
Member Author

ayoayco commented Jan 11, 2023

@ayoayco On the bottom here there should be a bit more padding, no?

To my eyes this is okay, but will try to find a balance for the thumbnail size as well

@ayoayco
Copy link
Member Author

ayoayco commented Jan 11, 2023

@patak-dev found a happy balance: made square thumbnail tiny-bit bigger and this puts more space for the small preview info description

Screenshot 2023-01-11 at 8 03 09 PM

Also for big preview card we get to keep the p4 :)

Screenshot 2023-01-11 at 8 03 20 PM

Copy link
Member

@patak-dev patak-dev left a comment

Choose a reason for hiding this comment

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

Looks good!

@patak-dev patak-dev merged commit 689ae0c into main Jan 11, 2023
@patak-dev patak-dev deleted the fix/small-preview-card-spacing-on-mobile branch January 11, 2023 19:08
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.

3 participants