CODEWITHSUNDEEP
oracle-apex
Granedoy
Granedoy

Reputation: 27

Oracle Apex - Cards Column

In the mobile version, the card appears all in a single column but I want it to be in 2 column. Any ideas to solve this problem?

1 COLUMN MOBILE

2 COLUMN MOBILE HOW I WANT

Upvotes: 0

Views: 1059

Answers (1)

Tony Andrews
Tony Andrews

Reputation: 132570

If you are using the Cards region type you can experiment with this CSS:

.a-CardView-items--grid {
    grid-template-columns: repeat(auto-fill,minmax(var(--a-cv-item-width,320px),1fr));
}

That specifies a minimum and maximum width for the cards, so you want to try reducing the minimum by adding inline CSS something like:

.a-CardView-items--grid {
    grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
}

That changes the minimum width to 160px, so you should get 2 cards side by side as long as the device width exceeds 320px (approx). You would want to wrap this in a media query so that it only affects smaller devices e.g.

@media screen and (max-width: 479px) {
    .a-CardView-items--grid {
        grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
    }
}

Upvotes: 1

Related Questions