Makoto
Posts: 0
Joined: Fri Oct 10, 2014 8:15 am

How to map images and show them inline?

Hi Appery team,

I'd like to map multiple images to an image component in a grid and show them inline.
I could successfully map them, but couldn't show them inline.
I've already specified 'display: inline-block;' to the image in CSS.
But it doesn't work.
I need your help.
Thank you!

【Current】

Image

【Goal】

Image

Galyna Abramovych
Site Admin
Posts: 84
Joined: Tue Mar 22, 2016 6:03 pm

How to map images and show them inline?

Hello,

It looks like your styles need more weight.
Please try adding this css:
codeimg.my_img {
display: inline-block;
width: 20%;
}/code

Don't forget to add the "my_img" class to every image to make it work.

Makoto
Posts: 0
Joined: Fri Oct 10, 2014 8:15 am

How to map images and show them inline?

Hello Galyna,

thank you for your reply.
I followed your advice, but it still doesn't work.

Makoto
Posts: 0
Joined: Fri Oct 10, 2014 8:15 am

How to map images and show them inline?

My mapping in service response is like this.

Image

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

How to map images and show them inline?

Hello,

Have you added a class "my_img" to each image? Could you show a screenshot of how you did it?

Makoto
Posts: 0
Joined: Fri Oct 10, 2014 8:15 am

How to map images and show them inline?

Hello,

Thank you for your reply.
As I said in the first post, I'd like to map multiple images to an image component in a grid. So, I add the class "my_img" to the only one image like this.

Image

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

How to map images and show them inline?

You use a mapping to images, located in the grid. The provided CSS is used for images without that grid.

Please use the following CSS for your case:
pre[data-wrapper-for="mobilegrid_208"]{
display: inline-block;
width: 20%;
}/pre

Makoto
Posts: 0
Joined: Fri Oct 10, 2014 8:15 am

How to map images and show them inline?

Hello,

it worked perfectly!
Thank you very much

Return to “Issues”