text under photo

rutger1973

Hi guys,

I have installed your grid and it looks really nice! Unfortunately, the grid is not leaving me with space to place a title and subtitle under my pictures. This is because the pictures in the design use the same ratio as the grid. pictures are 1:1, 2:1 or 3:1 so the picture fills the complete spaces provided by the grid. No room for text.

I have attached my customers design that I need to build. Suggestions?

Thanks!

saguaros

rutger1973

Hi,

Kindly share the login info of your site and screenshot of how you want it should be so I can check.

rutger1973

saguaros Hi Saguaros, should I send you a PM with login details?

teitbite

rutger1973 Hi. You can edit first post of this thread and than You will see a black field where You can place Your access details. Anything in those fields is only visible to JA support users.

rutger1973

done!teitbite

teitbite

rutger1973 Hi. Thank You for the access, but we are still missing the screenshot of the design You widh to accomplish. Can You please add that as well?

rutger1973

teitbite Hi, i thought i attached that in the first post. Anyway, here it is.

teitbite

rutger1973 Hi. Please try with this in css:

.gkGridElement p:nth-child(2) {
position: absolute;
background: #fff;
z-index: 1;
bottom: 0;
left: 0;
width: 100%;
}

rutger1973

teitbite Thanks for this solution, I implemented it and it is working. However, it places a 'label' over the photo so the complete photo is not visible. Any change the height of the row in the grid can be changed? That way, I can show the entire photo and have room for text.

aman204

rutger1973 Hi

You may try adjust the bottom value here accordingly probably making it -10px :

.gkGridElement p:nth-child(2) {
position: absolute;
background: #fff;
z-index: 1;
bottom: 0;
left: 0;
width: 100%;
}

rutger1973

aman204 Yes I tried that but that still doesn't change the height of the complete row of the grid. That just lowers the position of the textlayer over the photo. Can't the height of the complete row be adjusted?

teitbite

rutger1973 Hi. Sorry but grid elements has to be kept like that. They have to be a square or a multiplied square area. This is how the whole Grid is based on. So try using the background color to mimic the end of the photo.

.gkGridElement p:nth-child(2) {
    position: absolute;
    background: #f0f0f0;
    z-index: 1;
    bottom: 0;
    left: 0;
    width: 100%;
}

rutger1973

teitbite Ok, thanks. I need to check with my customer then. Thanks for your help.

teitbite

rutger1973 Hi. Sorry I couldn't help more. Closing this thread now.