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

Vertical alignment of text next to inline image


HelenCrozier
Go to solution Solved by HelenCrozier,

Question

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

card-image.thumb.jpg.d9d3e7a264efc83d2aa82820e5dd8ea4.jpg

many thanks!!!

Edited by HelenCrozier
typo
Link to post
  • Answers 14
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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;

Yes for question regarding order I checked the page, it display well, what's wrong

Posted Images

14 answers to this question

Recommended Posts

  • 0

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;
  }
}

image.thumb.png.0ac808c3fb9f1064dcceaf430b842e71.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Advanced Product Delivery Date Time PickerGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0

@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;
 }
}

 

Link to post
  • 0

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

Edited by HelenCrozier
information change
Link to post
  • 0

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...

image.png.b123ad1a04ecf147f3dfa7b627bab822.png

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Advanced Product Delivery Date Time PickerGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0

@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 😞

Link to post
  • 0

Yes for question regarding order

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Advanced Product Delivery Date Time PickerGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0

@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. 

Edited by HelenCrozier
information changed
Link to post
  • 0

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

image.thumb.png.2572728a8308d3cec2dc9320317f2758.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Advanced Product Delivery Date Time PickerGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0

@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!!

Link to post
  • 0

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....
kerry.jpg.2649d6ee244011cbb3c0df66ed0c37f6.jpg

Link to post
  • 0
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....
kerry.jpg.2649d6ee244011cbb3c0df66ed0c37f6.jpg

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Advanced Product Delivery Date Time PickerGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0

@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.

 

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...