- "Social Media" now either shares nicely or sticks to the right.
- The footer doesn't grow unreasonably, but takes a sensible amount of
space at the bottom of the page and is pushed further if it has to be.
- The footer is no longer ever wider than the viewport
.container {
padding: 50px 0 0;
width: 100%;
.container {
padding: 50px 0 0;
width: 100%;
+ min-height: 98vh;
+ padding-bottom: 11.5rem;
}
.main {
margin-left: .5em;
margin-top: 1em;
}
.main {
margin-left: .5em;
margin-top: 1em;
+ /*min-height: 30vh;*/
+ margin-top: -11rem;
+ min-height: 11rem;
margin-top: 2vh;
display: flex;
flex-wrap: wrap;
margin-top: 2vh;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
box-shadow: 0 -3px 5px rgba(150,150,150,.36);
justify-content: space-between;
align-items: flex-start;
box-shadow: 0 -3px 5px rgba(150,150,150,.36);
}
.footerchild {
margin-top: .5em;
flex: 1 1 1px;
}
.footerchild {
margin-top: .5em;
flex: 1 1 1px;
+ min-width: 12rem;
+}
+
+.footerchild:last-child {
+ margin-bottom: 1em;
-.footer-push {
- margin-left: auto;
- min-width: 12em;
- max-width: max-content;
+@media all and (max-width: 60rem) {
+ .footer-push {
+ margin-left: auto;
+ width: max-content;
+ }
justify-content: space-between;
align-items: center;
background: rgba(var(--copyright-bg),.5);
justify-content: space-between;
align-items: center;
background: rgba(var(--copyright-bg),.5);
color: rgba(var(--copyright-text-color),.8);
}
color: rgba(var(--copyright-text-color),.8);
}