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:
thanks!
@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.
Close @MichaelG expand that element so we can see all the children (images and commas).
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 ‘element.style’ and try something like:
margin-left:-20px
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.
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 ....... div.kn-detail.field_422_thumb_18 > div.kn-detail-body > 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!!