Variant colors css problem

[SeizeTheDay]

Hi everyone. The variant colors of the product appear one below the other on mobile view. I want them lined up side by side because it takes up a lot of space down.

link:

https://klen.com.tr/erkek-tisort

Which codes do I need to change?

Thanks for helps.

Regards.

Edited July 2, 2021 by SeizeTheDay (see edit history)

[Razi]

hello,

you need to add " display: contents; "
in file:
themes/01bold/assets/css/theme.css
line: 8392

like:

.products .product-miniature .product-content.visible {
    display: contents;
}
OR

.products .product-miniature .product-content.visible {
    display: table-row;
}

[SeizeTheDay]

@Razi hi razi thanks for reply. I added the the codes but there was a problem. Color variants didnt fit on the screen and appeared in two line:

 

[Razi]

As I see in site, its not show any new code in this line.
where you added this code?

can you little explain.
if you simple add

display: contents;

and its just works fine for all devices

[SeizeTheDay]

2 minutes ago, Razi said:

As I see in site, its not show any new code in this line.
where you added this code?

can you little explain.
if you simple add

display: contents;

and its just works fine for all devices

I edited it as you stated. I think you need to delete cookies. I have added the css file below, you can check it.

thanks.

theme.css

[Razi]

Kindly add this file and test again,

Thanks

 

theme.css

[SeizeTheDay]

@Razi it's great! thanks for your support. i'm grateful for that, looks great.

 

[Razi]

your welcome,
you can also give me a points by client on heart button, bottom of each reply.

Thanks

[SeizeTheDay]

@Razihi razi I noticed that there is another problem. When I add a 2nd product to the category, the product price disappears. Also, the price field has shifted to the right, it was previously on the left. what to do?

thanks.