several layout issues
There are issues with the footer, extension key and table on small viewports.
Here are the solutions:
This needs the display setting
@media (min-width: 768px)
_grid.scss:71
.col-md-5 {
-webkit-box-flex: 0;
-ms-flex: 0 0 41.66667%;
flex: 0 0 41.66667%;
max-width: 41.66667%;
display: flex;
}
The whole CSS for the button container
.footer .downloadT3 .button-container {
align-self: flex-end;
display: flex;
//align-items: flex-end;
margin-left: auto;
}
Button container code
<div class="col-md-5">
<div class="button-container">
<a class="btn btn-primary" href="https://get.typo3.org/stable">Download</a>
<a class="btn btn-white" href="https://typo3.org/typo3-cms/overview/">Get
more info</a>
</div>
</div>
responsive Table
.ter-ext-single-versionhistory.ter-toggle-hide {
overflow-x: auto
}
Prevent too long extension keys breaking the layout
<small class="text-muted">
<br><span itemprop="name" style="
[itemprop="name"] {
text-overflow: ellipsis;
overflow-x: hidden;
max-width: 100%;
display: inline-block;
}
Also wrap the slash
">sms_responsive_images</span> <span>/</span>
<span class="ter-ext-state-beta">beta</span>
</small>
[itemprop="name"] {
text-overflow: ellipsis;
overflow-x: hidden;
max-width: 100%;
display: inline-block;
}
Align all the elements
text-muted > * {
vertical-align: top;
display: inline-block;
}
How can we make PRs?