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 PostListing mobile margin layout issue #1706

Merged
merged 3 commits into from Jun 29, 2023

Conversation

alectrocute
Copy link
Contributor

Hi all!

In this PR:

  • Fix PostListing mobile margin layout issue

On mobile, the avatar of the user on the createdLine was touching the title of the post. It was bugging me. This fixes it.

Thanks!

@@ -1373,7 +1373,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<div className="d-block d-sm-none">
<article className="row post-container">
<div className="col-12">
{this.createdLine()}
<div className="mb-1">{this.createdLine()}</div>
Copy link
Member

Choose a reason for hiding this comment

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

this.createdLine already returns a div. Put the class name on that instead of making a new div.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

But I want it to only affect mobile. Any ideas how to do that?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I can add an arg to createdLine, actually.

Copy link
Member

Choose a reason for hiding this comment

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

I believe you can use mb-1 mb-md-0. At least, I think margin classes are responsive.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

That totally did the trick. Thanks so much.

Copy link
Contributor

Choose a reason for hiding this comment

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

Always look for Bootstrap classes before adding a element or a div

@alectrocute
Copy link
Contributor Author

@SleeplessOne1917 Please check out my latest commit. Thanks!

@alectrocute alectrocute enabled auto-merge (squash) June 29, 2023 17:22
@alectrocute alectrocute merged commit fead020 into main Jun 29, 2023
2 checks passed
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.

None yet

3 participants