Jump to content

How to move image title to top of stack images?

Recommended Posts

  • Replies 7
  • Views 889
  • Created
  • Last Reply
Posted

Yes @tuanphan. The 2 images (I chose "stacked" design) where it says "made to order" and "one of a kind". I would like those headings with the text below where it says "enter text here" to appear on top of the images. 

thanks 

Posted
On 9/25/2020 at 8:49 PM, Marta said:

Yes @tuanphan. The 2 images (I chose "stacked" design) where it says "made to order" and "one of a kind". I would like those headings with the text below where it says "enter text here" to appear on top of the images. 

thanks 

Add to Home > Design > Custom CSS

div#page-5f5fabc37ae33029763ed761 .span-12>.row:nth-child(3) figure {
    display: flex;
    flex-direction: column-reverse;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
On 9/26/2020 at 6:51 PM, tuanphan said:

Add to Home > Design > Custom CSS


div#page-5f5fabc37ae33029763ed761 .span-12>.row:nth-child(3) figure {
    display: flex;
    flex-direction: column-reverse;
}

 

Excellent, thank you so much! 

Posted

@tuanphan Just wondering though, how come the same formula didn't work on another page I tried? I entered this code: 

 

div#page-5f624f74ecc17e6fbcdbfaa2 .span-12>.row:nth-child(3) figure {
    display: flex;
    flex-direction: column-reverse;
}
 

for this page http://www.primaveraleathers.com/journals and it didn't do the same thing. 

Is it possible to make these stack images do the same thing on every page they're used? 

 

thanks again 

Posted

Add to Page Settings > Advanced > Header

(If you use Personal Plan > Edit Page > Add Code Block)

<style>
.design-layout-stack {
    display: flex;
    flex-direction: column-reverse;
}
</style>
14 hours ago, Marta said:

@tuanphan Just wondering though, how come the same formula didn't work on another page I tried? I entered this code: 

 

div#page-5f624f74ecc17e6fbcdbfaa2 .span-12>.row:nth-child(3) figure {
    display: flex;
    flex-direction: column-reverse;
}
 

for this page http://www.primaveraleathers.com/journals and it didn't do the same thing. 

Is it possible to make these stack images do the same thing on every page they're used? 

 

thanks again 

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
On 9/25/2020 at 7:31 AM, tuanphan said:

You mean Bag images, on desktop?

 

5 hours ago, tuanphan said:

Add to Page Settings > Advanced > Header

(If you use Personal Plan > Edit Page > Add Code Block)


<style>
.design-layout-stack {
    display: flex;
    flex-direction: column-reverse;
}
</style>

 

Wonderful, thank you so much! 

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.