rounded photo of list

[Spark Chao]

hello
I drop a image into the list component,and set the css "roundedphoto".
but it will be something wrong.

I test another image component without into list,and set the same css "roundedphoto" .
It will be ok.(I hope the image will be a circle shape.)

can you help me to figure out or suggest another way to do that?

[Alena Prykhodko]

Hello,

Please specify the following
1) Styles you have applied;
2) Name of list, listitem, grid, cell, and image components.

[Spark Chao]

Dear Alena
1) Styles you have applied;
=iOS-like ,swatch:c

2) Name of list, listitem, grid, cell, and image components.
=Name of list:mobilelist_80
listitem:mobilelistitem_81
grid:mobilegrid_101
cell:mobilegridcell_102
image:image

css:
.roundedphoto {
-webkit-border-radius: 600px;
-moz-border-radius: 60px;
border-radius: 60px;
}

[Evgene Karachevtsev]

Hello!

Your css is too "light" from the css "weight" selector point of view
https://css-tricks.com/specifics-on-c...
http://blog.bismallion.com/appery-tut...

try next selector
.roundedphoto, .ui-listview li.ui-last-child img:first-child:not(.ui-li-icon) {
-webkit-border-radius: 600px;
-moz-border-radius: 60px;
-webkit-border-bottom-left-radius: 100px;
border-radius: 100px;
border-top-left-radius: 100px;
}

[Spark Chao]

thank you Evgene
I try your suggestion,it does work!!
but now only the first one image will be circle shape.
and the latter still the same.
how should I change the css code?

[Yurii Orishchuk]

Hi Spark,

Please try following CSS:

pre

html body .roundedphoto, .ui-listview li img:first-child:not(.ui-li-icon) {
-webkit-border-radius: 600px;
-moz-border-radius: 60px;
-webkit-border-bottom-left-radius: 100px;
border-radius: 100px;
border-top-left-radius: 100px;
}

/pre

Regards.

[Spark Chao]

Yurii
Thanks for your help!!!!
It dose work~

[Spark Chao]

Yurii
Something wrong!
today I reopen the app to test,the shape of list's photo back to the previous shape.
did the yesterday update make something happen?
please help methanks!!

[Egor Kotov6832188]

Hi Spark
1) you should see the actual result right away in the editor
http://gyazo.com/9915015f525404a0e571...

2) try to increase value for border-radius
3) place image in the grid

[Spark Chao]

Dear Egor
I try to increase value for border-radius ,but it still no working.

I use the same code was working yesterday,please see the reply above.
why it suddenly not working today,because I didn't edit anything today.
thanks for your kindly help!