Closed iLtc closed 7 years ago
I believe the margins can be more simply fixed by adding .col-md-12
to .page-heading
in its own row:
<div class="row">
<div class="page-header col-md-12">
<h1>{{ page.header }}</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
{{ content }}
</div>
</div>
Actually, the problem is that there is one .row
inside another .row
. This is not necessary. After checking the official example, which put .page-header
out of the .row
, I removed the outer .row
.
If you want to keep the .page-header
inside the .row
, we can either write the two .row
separately or remove the inner .row
. And you are right, we need add .col-md-12
to .page-header
.
Also, this will still cause the margin problem on the desktop version. And we still need to override the css attribute.
Yeah, I think I have it right with two consecutive rows, one with .page-heading
and one for content. I tried the change in Chrome and Firefox dev tools and it seems to work as expected? Not sure why the CSS change would still be required… this is a pretty basic Bootstrap layout.
Ok, I fixed it by using the two consecutive rows. I also removed the CSS.
Please notice that, on the desktop version, there is a horizontal margin problem now. 😭
Please notice that, on the desktop version, there is a horizontal margin problem now. :sob:
@iLtc Did you want to make any changes to address that?
This does seem better on mobile, so it could make sense to merge now.
Since I can't solve that, we can merge now.
By the way, this is what I will do next~
Let's move the "next meetup" feature to another PR, since it's off-topic.
God, I don't know push to my repository will influence here.
Hopefully, it works now.
God, I don't know push to my repository will influence here.
Tip: never open PRs from master
. 😀
Thanks @iLtc!
I fixed the horizontal margins on mobile.
However, it causes another margin problem on the desktop version.
I can not find an elegant solution. I just override the css attribute.
It looks good now.