Vertical alignment of text next to inline image

Site URL: https://martine-emdur.squarespace.com/sydneysider-artworks/inline-image

I'm displaying images on a gallery website using a blog collection for each exhibition and the client prefers the look and style of the card image - it transfers to mobile nicely and keeps the text down at the bottom of the image so it looks like a  postcard of sorts. Unfortunately they also want a light box to show the image full size and while I've tried light box anything and it works super well there are just too many artworks to make this an easy solution when they are editing the site themselves.

I'm now using an inline image because it gives the desired light box however I strike problems when I try to mimic the card look by adding a spacer to move the text to the bottom. It just doesn't work! I'm not skilled enough yet to come up with any flex box code but would this be the right way to go? I would prefer to be able to add the code into each exhibition (blog) just once but am I hoping for the impossible? 

The page with the inline image and offending text block 😉 is here...
https://martine-emdur.squarespace.com/sydneysider-artworks/inline-image
The page with the card image (desired layout) is and see image below.
https://martine-emdur.squarespace.com/sydneysider-artworks/card-image
password = elliot

many thanks!!!

Hi there

Could you make sure all blog pages share same column template? Try this on custom css

.BlogItem.hentry .sqs-block-content p {
  font-family: Arial,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
}
@media only screen and (min-width: 601px) {
  .BlogItem.hentry .sqs-col-12 > [data-block-type='2'] + .row {
    display: flex;
  }
  
  .BlogItem.hentry .sqs-col-3 > [data-block-type='2'] {
    position: absolute;
    bottom: 10%;  
  }
}

@media only screen and (max-width: 600px) {
  .BlogItem.hentry .col {
    width: 100% !important;
  }
  
  .BlogItem.hentry .sqs-col-12 > [data-block-type='2'] + .row {
    display: grid;
  }
  
  .BlogItem.hentry .sqs-col-12 > [data-block-type='2'] + .row > .sqs-col-3:first-child {
    order: 2;
  }
}

@bangank36 thank you so so much!! It's nearly there and behaving so much better than before. I have just two questions...

1. To get the text to sit at the bottom flush with the image is there something I should do? As I shrink down the size of the page it moves down and it still looks great but I was thinking I could get it to sit at the bottom. It's not critical but a nice to have if possible.

2. I do have one blog that is for news and it needs to behave normally. With images and text normal size etc. There will be many more 'exhibition' blogs and most likely  just the one actual 'blog' so what is the easiest way apart from inserting the code as header injections for each blog separately?

Since you kindly helped me out I've realised that it is better to have the image on the left and text on right so the image of course stacks above the text on mobile. When I was making those changes it turns out that I really only need two columns. Will this affect the code?
 

Hi HelenCrozier

1. You got the code adapted very well to your new template, I just tried 15% made it better

.BlogItem.hentry .sqs-col-5>[data-block-type='2'] {
    position: absolute;
    bottom: 15%;
}

2. Yes you can assign the css for each type of blog by trying to figure the article class name like so...

You also change the column order so I dont need to change the row to grid for reordering

@bangank36 thank you for trying to help... I have been going a little bit crazy because I couldn't get the alignment to work for every post when I changed the layout. I deleted the spacer column so it goes down to two columns. Do I need to do anything to reflect that? I've been going in to find the column numbers and changing the css but it doesn't always work. I may have been editing while you were looking unfortunately.... 

Was the code below just for when I wanted the image to appear above the text on mobile and I don't need it with the image to the left as it will automatically happen?
.BlogItem.hentry .sqs-col-12 > [data-block-type='2'] + .row > .sqs-col-5:first-child {
    order: 2;
  }

I won't touch https://martine-emdur.squarespace.com/sydneysider-artworks/inline-image again so you can see if I've messed it up 😞

Yes for question regarding order

I checked the page, it display well, what's wrong

@bangank36 thank you again ....
It's a strange thing but it seems that when I'm in edit mode the text shifts up to the top of the /inline-image page that I was working on. I went back, closed edit mode and hit refresh and suddenly it was in the right place! Usually when I work with CSS I'm used to seeing the changes straight away.

So I checked some others - and unfortunately even though the layout is identical on the other exhibition blogs sometimes the text block has a different column so obviously the code won't work in that case. I have fixed the one in the url below by adding column 6 into the css - I hope I have done it properly.

https://martine-emdur.squarespace.com/vanessa-stockard-artworks/after-christus
password=elliot

 Any thoughts on why this would happen? I'm wondering if it's because I reduced the amount of columns - is that what could have caused it?  I really appreciate your persistence and patience - at least I'm learning lots. 

have you tried this ? also as I said the code can only applied if the column width and number of column is identical

@bangank36

OK thanks for that. I will have to figure out how to make sure it's always the case and not change anything.

Thanks so much again.

@bangank36 

I've just discovered if I put two columns in the blog post and make them exactly half with image on the left and text on the right all text blocks are in column 6 and the text goes down like magic just like you said. I'm so happy and grateful.... I won't forget this lesson!!

Just when you thought you had got rid of me @bangank36 I find a small problem when I go to the images on Safari. Chrome is perfect but Safari sends the text down a bit too low past the bottom of the image. Do I have to add some sort of browser compatibility code to the css to fix this? many thanks....

30 minutes ago, HelenCrozier said:

Just when you thought you had got rid of me @bangank36 I find a small problem when I go to the images on Safari. Chrome is perfect but Safari sends the text down a bit too low past the bottom of the image. Do I have to add some sort of browser compatibility code to the css to fix this? many thanks....

Unfornately I dont have a mac here to check it, may you want to create new topic on forum for the help, thanks

This is what I see on Chrome.

This is what I see on Safari.

Both on Mac.

@creedon that is so very strange. 
I'm rechecking this morning and still have mac chrome performing as desired with safari shoving the text down further. As you will see in the posts above @bangank36 was tremendously helpful in providing code to get it in the right position - I just need to make an adjustment for safari's extra padding and I have no idea how to do that! I will do as he suggested and make a separate post for this issue.

@creedon I needed to add in a relative property so this is the final code that got it all working....

 

.BlogItem.hentry .sqs-block-content p {
  font-family: Arial,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  line-height: 1.2em;
}
@media only screen and (min-width: 768px) {
  .BlogItem.hentry .sqs-col-12 > [data-block-type='2'] + .row {
    display: flex;
  }

.sqs-col-12 .sqs-col-6 {
width: 50%;
position: relative;
}
  
 .BlogItem.hentry .sqs-col-6>[data-block-type='2'] {
    position: absolute;
   bottom: 0%;
  }}


@media only screen and (max-width: 767px) {
  .BlogItem.hentry .col {
    width: 100% !important;
  }
 
  .BlogItem.hentry .sqs-col-12 > [data-block-type='2'] + .row {
    display: grid;
 }
}