Jump to content

Index Item Text doesn't show "centered" on the images - how can I do?

Go to solution Solved by Samso,

Recommended Posts

Hi everyone,

I'm trying a new template with 7.0
(7.1 has too few options and cannot match my requirements)

My issue is that I would like to have my text "centered" on each thumbnail of my projects...
But they show justified from left even if I tick "centered" option (just because the text is longer than 4 letters....)
When it's a very short text like 3 or 4 letters it's ok. But I would like to put the title of my projects.
Any idea to solve this issue?
Many thanks! 🙂

Capture 9.jpg

Edited by Samso
Link to comment
  • 2 weeks later...
11 hours ago, Samso said:

actually it depends of the side of your browser window... 

if it's a big window, the text looks small but quite well centered
but with a small window (computers with small screens, labtops..) the text looks bigger and not centered...

Add to Design > Custom CSS to fix problem

h2.index-item-title {
    max-width: 100% !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Solution

Hey @tuanphan

thanks a lot. Actually it works for the text wrapper, but not for the text inside it, which remains unaligned if we have two lines for example (longer texts still go beyond the wrapper on the right side.
BUT ! I found the solution using chat GPT
after a long time of exploration, suggestions and questions we finally found the solution which is:

In the section  Design > custom CSS:

.index-item-text-wrapper h2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

 

you're right, the "h2" was a key element to solve the problem 🙂

Edited by Samso
orthographic mistake
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.