Jump to content

Vertical alignment of text next to inline image

Recommended Posts

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

Link to comment
  • Replies 14
  • Views 2.6k
  • Created
  • Last Reply

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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

Link to comment

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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

Yes for question regarding order

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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

Link to comment

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.