Compact footer for mobile: keep link columns side-by-side on narrow screens.
This commit is contained in:
parent
5761076d75
commit
2171a23390
2 changed files with 49 additions and 31 deletions
32
custom.css
32
custom.css
|
|
@ -189,7 +189,13 @@ span.avoidwrap {
|
|||
|
||||
.rb-footer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.rb-footer-nav {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
|
|
@ -258,19 +264,29 @@ span.avoidwrap {
|
|||
}
|
||||
|
||||
@media screen and (max-width:750px) {
|
||||
.rb-footer-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
.rb-footer {
|
||||
padding: 40px 20px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:568px) {
|
||||
.rb-footer-grid {
|
||||
grid-template-columns: 1fr;
|
||||
.rb-footer-nav {
|
||||
gap: 16px;
|
||||
}
|
||||
.rb-footer-group-title {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.rb-footer-links {
|
||||
gap: 4px;
|
||||
}
|
||||
.rb-footer-ctas {
|
||||
margin-top: 24px;
|
||||
flex-direction: column;
|
||||
}
|
||||
.rb-footer-ctas .button {
|
||||
text-align: center;
|
||||
}
|
||||
.rb-footer-quote {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.rb-footer-bottom {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue