Sign in to Joomla 4 Beta 1 for Testing control panel.
Select NEW Module.
Module type options displayed in 4 columns.
Atum CSS =
.new-modules .card-columns {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
4 columns on large screen device
but also on small screen device (phones & tablets)
Request change CSS for example to:
@media (min-width: 769px),
only screen and (device-width: 768px) and (orientation : landscape) {
.new-modules .card-columns {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media (min-width: 576px) and (max-width: 767.98px),
only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
.new-modules .card-columns {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 575.98px) {
.new-modules .card-columns {
grid-template-columns: 1fr;
}
}
or similar.
Result will be more usable interface on phones and tablets (portrait & landscape view) and large screen devices
The suggestion will certainly work.
My preference thou would be something more fluid to the space available rather than setting the number of columns depending on screensize. The following for example will display as many columns that allow the cards to be at least 240px wide...
.new-modules .card-columns {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
I am sure that this is what used to happen
Status | New | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2020-06-09 14:03:08 |
Closed_By | ⇒ | Quy |
Duplicate #29064
@ciar4n would this be a potential fix?