Per T238282#5666593, make the article card in the Suggested edits module display more responsively according to the width of the module container to accommodate mobile tablet users.
Looking at T238279#5680536This is a proposed //enhancement// for a wider article card design when the Suggested edits module is wide.
Besides the visual improvement, the the article card and content inside the Suggested edits module should also display more responsively on Desktop for when the module is narrower than 360pxit also allows users to read more of the page extract to potentially help with deciding whether they want to choose that task.
=== Proposed design:
**A) Larger Mobile devices**
Utilize media queries to detect when the width of the module is ≥Note this presupposes that the layout changes T258005 and Suggested edits amendments (on task T258704) for variant C & D have been completed.
The proposal is to add a wider card format for when the Suggested edits module tends to become wider than 600px, increase the card dimensions to image size at 512x256px.
{F31123298}which is in the two layouts: (a) Narrow homepage layout (where the SE module is between 600-800px), and (b) Wide homepage (where the SE module is around 680px or wider).
**B) Narrow widths**
Utilize media queries to detect when the width of the module becomes too narrow, and shift the style and position of the left and right arrows to be as follows:
{F31123216}
Desktop is achieved by applying the following CSS tweaks:
```
@media screen and (max-width: 1280px) and (min-width: 1024px) {
.suggested-edits-previous {
left:16px!important;
border: solid 1px #C8CCD1;
background-color: #F8F9FA;
position:relative;
margin-left: 16px;
width:36px;
height:36px;
padding:4px 0 0 4px!important;
z-index: 1000;
border-radius: 20px;
margin-bottom: 24px;
}
.suggested-edits-next {
right:16px!important ;
border: solid 1px #C8CCD1;
background-color: #F8F9FA;
position:relative;
margin-right: 16px;
width:36px;
height:36px;
padding:4px 0 0 4px!important;
z-index: 1000;
border-radius: 20px;
margin-bottom: 24px;
}
}
```| Wider card {F31946953} | Compared to the normal card {F31946955}
[[ https://app.zeplin.io/project/5bd0b069495b5d0a002e7eb6/screen/5f1aedd40e10a5392f91edc4/ | Mock in Zeplin ]]
Prototype with example css for applying media queries to achieve the wider card: https://codepen.io/reets/pen/qBbvovg?editors=1100