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


Circle Member
  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Hello Patrick I'm down the zoom rabbit hole as well - have you changed your method from lightbox anything plus magic zoom to just using fancybox? I'm testing fancybox out and have uploaded the gallery and inserted it as a code block - is there a better way than this? thanks for your help...
  2. @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; } }
  3. Thanks to @bangank36 for starting me off and to Chris Schwartz-Edmisten who did some refining for me I now have the exact effect I need for my client's site. It's a shame Squarespace can't have the lightbox option for all image formats - if they did I wouldn't have had to go through all that angst to achieve the result we needed. Here's a screenshot of safari doing the right thing and the code that achieved it in case it helps anyone. Happy days!!! .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; } }
  4. @rwp thanks so much for checking this out. I'm still learning about position properties and how they work! I've had some help from someone on another forum who also suggested I needed the relative property in there as well! I did notice the disappearing image when I was shrinking the page and am not quite sure why the mobile breakpoint was so low. I changed it to 768 and it has stopped doing the disappearing act!
  5. Site URL: https://martine-emdur.squarespace.com/vanessa-stockard-artworks/after-christus Have had tremendous help from @bangank36 with providing css to vertically align text to the bottom of an inline image on blogs to display exhibition artwork however have one problem with it. On Mac Chrome looks perfect with position: absolute; bottom: 1%; but as you can see Safari gives it an extra push down below the edge of the image. Is anyone able to help with how I account for the different padding in Safari? https://martine-emdur.squarespace.com/vanessa-stockard-artworks/after-christus password = elliot Many thanks in advance.
  6. @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.
  7. 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....
  8. @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!!
  9. @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.
  10. @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.
  11. @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 😞
  12. @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?
  13. 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!!!
  14. Thank you so much for sharing @Webswool - I was hoping to find the answer and your code was perfect!
  • Create New...