Ritual theme, image sizing issue

Technical Q&A
1

I am trying to get the 9th category portal to shrink to the same size as the other ones do when it switches to mobile view and I want it to orient itself to the center. I have already applied custom css for it to stack the way it currently does, please see screenshot for reference.

Screenshot (391)
Screenshot (391)1920×1200 400 KB

Screenshot (392)
Screenshot (392)1920×1200 285 KB

2

Hi @ABdev1 ,

Can you share either of these to help me support with this issue:

  • Go to your theme preview, and inspect the “Classy” element and share the devtools screenshot.
  • Or guide me to your website so that I can inspect it myself.

There seems to be some additional CSS styles in play here which we might have to address.

3

Hello @ABdev1,

On mobile you’ll have an odd number of circles (9), so the last one drops to a new row and sits on the left. You want that 9th circle to stay the same size as the others and sit centered.

From your screenshot, you’re already using a CSS code. Add these mobile rules under it (in the same Custom CSS box):

/* Mobile: keep all category portals same size + center the last (9th) one */
@media (max-width: 749px) {
  .layout-panel-flex{
    justify-content: center;   /* centers items in each row */
    gap: 14px;                 /* spacing between circles (adjust if needed) */
  }

  /* Force each portal to take the same width (2 per row) */
  .layout-panel-flex > *{
    flex: 0 0 calc(50% - 14px);
    max-width: calc(50% - 14px);
  }

  /* If the last row has only 1 item (like your 9th), center it */
  .layout-panel-flex > *:last-child{
    margin-left: auto;
    margin-right: auto;
  }
}

If your circles become too big/small

Change calc(50% - 14px) to one of these:

calc(50% - 10px) (a bit bigger)

calc(33.33% - 14px) (3 per row on mobile)

If you paste the HTML class for the individual portal item (from inspect), I can make this even more precise so it won’t affect anything else in that section. Thank you.