Limit card max width so mobile view will always show at least 2 aside

[pd431]

Is your feature request related to a problem? Please describe. On mobile view, grid cards are slighlty too large to fit two aside. This means almost half of the horizontal space is wasted, and twice as much scrolling is necessary to get to information.

Describe the solution you'd like Cap the max width of cards to some sub 50% value. In our environment, I'm using

.grid-section.card{
max-width: 48%;
} 

Describe alternatives you've considered Alternative could be to make tiles go wider on mobile, so they fit the width of the parent, so at least there isn't asymetrical whitespace on the sides.

Versions you are currently using (please complete the following information):

• Moodle: [e.g. 4.1.8/4.3]

** Funding ** Not researched.

Extra information I was going to do a pull request with the css changes above, but I'm weary the solution I'm suggesting here is too simplistic, naive or might have knockon effects. Thanks a lot for all the hard work

[pd431]

Realised that this modification makes images escape their boxes, so I've adjusted the fixes:

.grid-section.card{
   max-width: 48%;
   overflow: hidden;
}

.format-grid .thegrid .grid-image img{
   max-width: 100%;
}

This seems to work.

[gjb2048]

I'll admit that this solution does appear to work in terms of the limited testing I have done. However, it does mean that it's possible for a setting of 210px that the box will be 206px and thus the user is not getting what they expected.

[pd431]

I hadn't considered that.

The main reason I'd specify a non default setting on the image container width is to change how many cards I have a side. In term of user story, the fact that this wouldn't be respected wouldn't be such an issue for me.

Where it could cause an issue would be where I specified a very large width, and a wide aspect ratio, and ended up with a squished card, expecting the cards to be on top of each other nicely.

Maybe a toggle for Minimum numbber of cards aside (with a better name) that then toggles this styling?