how can i make collection list round with smaller text (only mobile version)?

[system]

Hi,

how can i make collection list round with smaller text (only mobile version)?

From this:

to this:

i‘m using Dawn Therme 15.2.0

my url: https://8ni0pc-bm.myshopify.com

Best regards

[Moeed]

Hey @Anonymous

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Rahul_dhiman]

Hello @Anonymous
Go to online store ----> themes ----> actions ----> edit code ----> assets ---->component-card.css
add this code at the end of the file and save.

.card__inner.color-scheme-2.gradient.ratio {
border-radius: 9rem !important;
}
.h3 {
font-size: calc(var(--font-heading-scale)* 1.4rem);
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[Dan-From-Ryviu]

Hi @Anonymous

You can add this code to Custom CSS in Online Store > Themes > Customize > Theme settings

@media (max-width: 749px) {
.collection-list .card--standard .card__inner {
    border-radius: 50%;
    overflow: hidden;
}
.collection-list .card--standard .card__heading {
    text-align: center;
    font-size: 14px;
}
}

[Made4uo-Ribe]

Hi @Anonymous

Try this one.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.collection-list .card--card, .collection-list .card--standard .card__inner,  .collection-list .card .card__inner .card__media {
    border-radius: 50% !important;
}

.collection-list .card .icon-wrap {
    display: none;
}

.collection-list .card__heading a {
    text-align: center;
}
@media only screen and (max-width: 749px){
.collection-list .card__heading a {
    font-size: 15px;
}
.collection-list__item.grid__item.slider__slide.collection-list__item--no-media {
        width: 20%;
        min-width: 15%;
    }
}

• And Save.

• Result:

  
  

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

[system]

Thanks it‘s working. Is it possible to make the bubbles smaller for mobile version like here:

[Dan-From-Ryviu]

Please update code to this

@media (max-width: 749px) {
.collection-list .card--standard .card__inner {
    border-radius: 50%;
    overflow: hidden;
}
.collection-list .card--standard .card__heading {
    text-align: center;
    font-size: 14px;
}
.collection-list .grid__item {
    width: calc(25% - var(--grid-mobile-horizontal-spacing) - 3rem);
    max-width: 25%;
}
}

[Made4uo-Ribe]

Hi @Anonymous

I adjust the circles on the mobile screen size. Check the previous code. Also, add this code to rmoe the slider buttons. if you like to. Same instruction.

.section-collection-list .slider-buttons {
    display: none;
}

And Save.

Result:

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

[Dan-From-Ryviu]

Please update the code to this version

@media (max-width: 749px) {
.collection-list .card--standard .card__inner {
    border-radius: 50%;
    overflow: hidden;
}
.collection-list .card--standard .card__heading {
    text-align: center;
    font-size: 14px;
}
html .collection-list .grid__item {
    width: calc(20% - var(--grid-mobile-horizontal-spacing) - 3rem) !important;
    max-width: 20% !important; 
    min-width: 20%;
}
}

[system]

Thanks for your work. Is it possible to male it even smaller? I want it the same size as this Website have (mobile Version): westwing.de

It Looks Like this:

[Dan-From-Ryviu]

Please update the code

@media (max-width: 749px) {
.collection-list .card--standard .card__inner {
    border-radius: 50%;
    overflow: hidden;
}
.collection-list .card--standard .card__heading {
    text-align: center;
    font-size: 14px;
}
html .collection-list .grid__item {
    width: calc(20% - var(--grid-mobile-horizontal-spacing) - 3rem) !important;
    max-width: 20% !important; 
    min-width: 18%;
}
}

[system]

Thanks but the Code is not working. It makes the bubbles bigger.

Kind Regards

[system]

Oh its working now. Thank you!

[system]

I have an orange border because the bubbles aren’t really round. Can i make them so round so that you can no longer see the orange border?

[Dan-From-Ryviu]

Code update

@media (max-width: 749px) {
.collection-list .card--standard .card__inner {
    border-radius: 50%;
    overflow: hidden;
    background: unset;
}
.collection-list .card--standard .card__heading {
    text-align: center;
    font-size: 14px;
}
html .collection-list .grid__item {
    width: calc(20% - var(--grid-mobile-horizontal-spacing) - 3rem) !important;
    max-width: 20% !important; 
    min-width: 18%;
}
}

[system]

I put the code in custom css and now it looks like this:

[Dan-From-Ryviu]

Code updated

@media (max-width: 749px) {
.collection-list .card--standard .card__inner {
    border-radius: 50%;
    overflow: hidden;
    background: unset;
}
.collection-list .card--standard .card__inner .media:after {
    content: '';
    background: #dddddd61;
    z-index: 1;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
}
.collection-list .card--standard .card__heading {
    text-align: center;
    font-size: 14px;
}
html .collection-list .grid__item {
    width: calc(20% - var(--grid-mobile-horizontal-spacing) - 3rem) !important;
    max-width: 20% !important; 
    min-width: 18%;
}
}

[system]

Dosn‘t work. But thanks for your time and work.

Kind regards

[system]

This code works but i can’t safe it it says:

Online Store editor session can’t be published

@media (max-width: 749px) {
.collection-list .card–standard .card__inner {
border-radius: 50%;
overflow: hidden;
background: unset;
}
.collection-list .card–standard .card__inner .media:after {
content: “”;
background: #dddddd61;
z-index: 1;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
right: 0;
top: 0;
}
.collection-list .card–standard .card__heading {
text-align: center;
font-size: 14px;
}
html .collection-list .grid__item {
width: calc(20% - var(–grid-mobile-horizontal-spacing) - 3rem) !important;
max-width: 20% !important;
min-width: 18%;
}

[system]

Ok, i changed something on the code and now it finally works. Thank you you the best.