Index Thumb Title spacing

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:

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

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

Any ideas? 

THANKS!

39 minutes ago, IXStudio said:

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

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)?

THANKS A LOT

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

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!

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

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:

I prefer the little horizontal scrolling hehe!

1 hour ago, JoaquinAustin said:

Thanks but now is worst, it looks like this:

 

I prefer the little horizontal scrolling hehe!

 

 

It's Ok for me. I think you make a mistake in putting the CSS rules. Please check it.