Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Index Thumb Title spacing


JoaquinAustin
Go to solution Solved by IXStudio,

Question

Site URL: https://austyn.es/

Hi there!

Hope someone can help with this one.

My site: https://austyn.es/

I have an index page with the portfolio. The index thumb titles are centered between works, and I would like to have the title closer to it´s own imagen.

Now it looks like this and I would like to have it like the red arrow indicates:

01.thumb.jpg.4eb21699f56309644515a4dc3c61c34f.jpg

 

To finally look something like this (each work with it´s title below, then the space and the other work...)

02.thumb.jpg.c61b4209d23048475c390f76068dc87f.jpg

 

If I use 2 items per rows it works better, but I really want just 1 work per row:

03.thumb.jpg.d5861f0619e4e5fbc5674ba825602841.jpg

Any ideas? 


THANKS!

 

Link to post
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Hi Use this code in Design -> Custom CSS #projectThumbs .project .project-image { margin-bottom: 1.5% !important; } Please use the like button if it helps you! Best, Leopold

Thank you! Works perfect

Use this code in Design -> Custom CSS @media screen and (max-width:750px){ #projectThumbs .project { width: 100% !important; } #projectThumbs .project img { width: 100% !important;

Posted Images

8 answers to this question

Recommended Posts

  • 0
4 hours ago, IXStudio said:

Best,
Leopold

Sorry, abusing of your good vibe hehe, I found that on mobile the web shows 2 items per row and it looks awful ...

Any idea on how to put it like desktop version (1 item per row)?

1895382264_Capturadepantalla2020-09-25alas15_58_00.thumb.png.9b2919ad1d6194da37467f8720774985.png
 

 

 

 

 

 

 

 

 

 

THANKS A LOT

 

Link to post
  • 0

Use this code in Design -> Custom CSS

@media screen and (max-width:750px){
#projectThumbs .project {
    width: 100% !important;
}

#projectThumbs .project img {
    width: 100% !important;
    height: auto !important;
}
}

Please use the like button if it helps you!

Best,
Leopold

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to post
  • 0
12 minutes ago, IXStudio said:

Use this code in Design -> Custom CSS


@media screen and (max-width:750px){
#projectThumbs .project {
    width: 100% !important;
}

#projectThumbs .project img {
    width: 100% !important;
    height: auto !important;
}
}

Please use the like button if it helps you!

Best,
Leopold

Thanks! It makes a little horizontal scrolling, but it's OK, lot better than before

Thumbs up!

Link to post
  • 0
1 hour ago, JoaquinAustin said:

Thanks! It makes a little horizontal scrolling, but it's OK, lot better than before

Thumbs up!

Use this code in Design -> Custom CSS

@media screen and (max-width:750px){
#projectThumbs>.wrapper {
    margin-left: 0 !important;
    width: 100% !important;
}

#projectThumbs .project {
    margin-left: 0 !important;
}
}

Please use the like button if it helps you!

Best,
Leopold

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to post
  • 0
On 9/25/2020 at 6:53 PM, IXStudio said:

Use this code in Design -> Custom CSS


@media screen and (max-width:750px){
#projectThumbs>.wrapper {
    margin-left: 0 !important;
    width: 100% !important;
}

#projectThumbs .project {
    margin-left: 0 !important;
}
}

Please use the like button if it helps you!

Best,
Leopold

Thanks but now is worst, it looks like this:

1644193543_Capturadepantalla2020-09-27alas20_52_32.thumb.png.65ff193d34fb035d98ba708e2e8bb80a.png

 

I prefer the little horizontal scrolling hehe!

 

 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...