Solved

Fix Collection Image Padding Issue

tobyh4
Excursionist
30 0 4

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

 

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

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
5120 1220 1493

This is an accepted solution.

Hi @tobyh4 

Add this to your code. 

 

width: 100%;
text-align: center;

 

And Save. 

Result:

Made4uoRibe_0-1706195827367.png

 

 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 2 (2)

Made4uo-Ribe
Shopify Partner
5120 1220 1493

This is an accepted solution.

Hi @tobyh4 

Add this to your code. 

 

width: 100%;
text-align: center;

 

And Save. 

Result:

Made4uoRibe_0-1706195827367.png

 

 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


tobyh4
Excursionist
30 0 4

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