How to fix collection image padding issue in my code?

Technical Q&A

Topic summary

  • Issue: CSS overlay text on collection images was wrapping because the overlaid element didn’t span the image width. The existing code positioned the title absolutely and centered it via transform, but lacked width control.

  • Fix suggested: Add “width: 100%” and “text-align: center” to the overlaid link (.full-unstyled-link) so it spans the full image width and centers the text.

  • Outcome: The change resolved the wrapping; the original poster confirmed it works. A screenshot was shared to illustrate the result. A site link was provided for context.

  • New question: The poster asked how to make the image opacity 60% (in CSS, opacity controls element transparency). This follow-up was not yet answered.

  • Status: Primary issue resolved; thread remains open regarding the opacity adjustment.

Summarized with AI on January 7. AI used: gpt-5.
1

Hi,

I have edited some code to put each collection title on top of the corresponding image, however, my issue is that the text keeps wrapping as there seems to be padding on each side of the image and the text won’t go the full way across it on one line.

This is what I mean:

Screenshot 2024-01-25 at 14.38.23.png
Screenshot 2024-01-25 at 14.38.23.png2618×840 434 KB

This is the code I have already written to achieve this:

<style>
ul#Slider-template--20911263318360__477125e9-4070-47c9-ab6d-93a16c1c6ed6 .full-unstyled-link{
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 26px; /* change this to adjust the text size */
  color: white;
  justify-content: center !important;
} /* Homepage collection text desktop */ 

</style>

Site link is: https://mauriciobenyar.myshopify.com/

Would really appreciate if someone could help,

Thanks

1 Like
2

Hi @tobyh4

Add this to your code.

width: 100%;
text-align: center;

And Save.

Result:

Made4uoRibe_0-1706195827367.png
Made4uoRibe_0-1706195827367.png1207×393 461 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

Thank you, works perfectly.
Do you also know if I could add code to make the image opacity 60%?