?
avatar Sdrawdenek
Sdrawdenek
9 Jun 2020

Steps to reproduce the issue

Sign in to Joomla 4 Beta 1 for Testing control panel.

Select NEW Module.

Expected result

Module type options displayed in 4 columns.

Atum CSS =

.new-modules .card-columns {
grid-template-columns: 1fr 1fr 1fr 1fr;
}

Actual result

4 columns on large screen device
but also on small screen device (phones & tablets)

System information (as much as possible)

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.

Additional comments

Result will be more usable interface on phones and tablets (portrait & landscape view) and large screen devices

avatar Sdrawdenek Sdrawdenek - open - 9 Jun 2020
avatar joomla-cms-bot joomla-cms-bot - labeled - 9 Jun 2020
avatar Quy
Quy - comment - 9 Jun 2020

Duplicate #29064

@ciar4n would this be a potential fix?

avatar ciar4n
ciar4n - comment - 9 Jun 2020

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));
}
avatar brianteeman
brianteeman - comment - 9 Jun 2020

I am sure that this is what used to happen

avatar Quy Quy - change - 9 Jun 2020
Status New Closed
Closed_Date 0000-00-00 00:00:00 2020-06-09 14:03:08
Closed_By Quy
avatar Quy
Quy - comment - 9 Jun 2020

Please test PR #29527

avatar Quy Quy - close - 9 Jun 2020

Add a Comment

Login with GitHub to post a comment