I'm STUCK on this! I am trying to add an image of 5 stars to a testimonial slider on Shopify. I've been playing in the CSS and have scaled to the size I've wanted the image to be, adjusted spacing, etc — but I can't get this to be centered perfectly. My current code is: .prose::after { content: url('https://cdn.shopify.com/s/files/1/0780/3689/3975/files/5_star_png.png?v=1713317867'); display: flex; width:10px; height:20px; transform: scale(.12); margin-block-start: 1em; margin-inline-start: 0px; margin-inline-end: 0px; justify-items: center; align-content:start; } Image below as well! Any tips super appreciated. Tried tweaking the display, changing content to background, etc. I'm self taught but new to this, help!!
Jese Leos
August 19, 2024
Verified user
Without seeing your HTML, this centers the stars within the prose div. justify-items should be justify-content and the width should most likely be 100%, otherwise you're trying to center the stars within 10px I also removed the transform: scale(.12) since that would make your element very small. .prose::after { content: url('https://cdn.shopify.com/s/files/1/0780/3689/3975/files/5_star_png.png?v=1713317867'); display: flex; width: 100%; height: 20px; margin-block-start: 1em; margin-inline-start: 0px; margin-inline-end: 0px; justify-content: center; } <div class="prose"> </div> Run code snippetExpand snippet