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.

Sign up for GitHub

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
Merged

Fix PostListing mobile margin layout issue #1706

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6ca365f
fix margin issue on postlisting mobile view
alectrocute Jun 29, 2023
90ed113
use arg instead
alectrocute Jun 29, 2023
a7cadc6
make suggested changes
alectrocute Jun 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/shared/components/post/post-listing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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


{/* If it has a thumbnail, do a right aligned thumbnail */}
{this.mobileThumbnail()}
Expand Down