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/home page appearance #289

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

Ayoubrabiae
Copy link
Contributor

@Ayoubrabiae Ayoubrabiae commented Jul 31, 2023

#Fix Home page text appearance

  • The issue number: 🔴 BUG: padding missing #189

  • The issue link

  • I fixed the appearance of the home page text by adding the style attribute [margin: auto] to the div containing the text. However, this caused the gap between the image and the text to be removed. To address this, I adjusted the container that holds both the text and the image, giving it a 64px gap to match the margin that the text previously had.

  • I have read and followed the contribution guidelines.

  • I have tested these changes either locally on my machine

@vercel
Copy link

vercel bot commented Jul 31, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
starter-hive ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 31, 2023 3:50pm

@ArslanYM
Copy link
Owner

ArslanYM commented Aug 2, 2023

Can you please tell me how to reproduce the issue. I cant seem to reproduce the issue in the first place. How to do it>

@Ayoubrabiae
Copy link
Contributor Author

I noticed that the text on the home page didn't look good, so I made a fix. I went to the 'home.jsx' file and added the attribute style={{margin: auto}} to the div containing all the text. This improved the text's appearance, but it caused an issue on phones where the gap between the text and the image disappeared due to the auto margin.

To address this, I added a class called 'home-page-container' to the container holding the text and image. Then, in the 'index.css' file, I selected the 'home-page-container' class and added a gap property with a value of 64px, the same value as the previous margin of the text.

Now, the text looks good on both the home page and mobile devices.

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.

2 participants