Styling profile pictures

Hi guys,

So I already have my round profile pictures, and

a) I would like to eliminate the coma between them,


b) and to overlay one picture on the other like that:



@MichaelG can you show us a screenshot of the elements in your browser inspector? That’ll help work out what to hide and position with CSS.

Sure Brad, here it is:

Close @MichaelG expand that element so we can see all the children (images and commas).

I’ve just learned how to expand an element. Here it is. Indeed we see where is the coma coded.

Excellent @MichaelG time to play - hopefully there’s a CSS panel under the page elements (or next to it if you drag it out far enough).

Click on one of the <a elements that’s the parent containing each image.

Type into the CSS section under ‘’ and try something like:

Does that start to overlap the images?
If not try the <img tag item.

Once you find something that works you can build a CSS rule to save in Knack that’ll load. And my hunch is if we get the overlap working it’ll hide the commas without having to style them.

Yep! it does make the images overlap.


Now we need to do something about the first image which gets cut.

That would have been nice. The pictures don’t hide the commas.

Here the CSS from the Inspect element of the field. I hope it helps. Ask me more if you need.

Great @MichaelG we’re getting closer and can see what works. Now it’s time to save the CSS in Knack and then refine it to exclude the first image.

A quick way to get the selector right is to right click on it in the Chrome inspector, and choose copy > selector. Do that with one of the <a elements, switch to Knack builder API > CSS and paste the copied selector. Then add your code you’ve tried above.

Might be something like (this is a guess):
#view_265 > section ....... > > span > span > a {margin-left: -20px;}

Share what you come up with and we’ll refine it.

1 Like

Hi Brad, a quick note to apologize for the delay in responding you. Finishing up some other things. Will answer you soon.
We will get those commas out!!