Jump to content

Caption underneath Collage template Image

Recommended Posts

Site URL: https://www.alexleedds.com/about

Hello,

I'm trying to add a caption underneath my profile picture that's using a collage template.  I need help adding a CSS code.  I tried adding this code from a previous post but it's not working.  I added an image of where I would like the new caption to be placed

 

Thank you!

 

/* Image caption */
body.homepage .design-layout-card .image-inset:after {
    content: "Photo by tuan";
    font-size: 16px;
}
body.homepage .design-layout-card .image-overlay {
    background: transparent;
}

Screen Shot 2021-04-28 at 10.08.14 AM.png

Link to comment
  • Replies 4
  • Views 513
  • Created
  • Last Reply

Add new code

div#block-b904ab00c2fa2677e86b .image-inset:after {
    content: "Photo by Tuan";
    display: block;
    font-size: 14px;
}
div#block-b904ab00c2fa2677e86b .image-overlay {
    background: transparent !important;
}

 

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

Link to comment

Also, some small problems. Do you want to fix these?

Site URL: https://www.alexleedds.com/

1. (Mobile-Header) Title on 1 line?

alexleedds.com-01-min.png

2. (Mobile-Footer) Reduce space between text – icon?

alexleedds.com-02-min.png

3. (Tablet-About) Increase text width?

alexleedds.com-03-min.png

4. (Tablet-CV) Increase width?

alexleedds.com-04-min.png

5. (Tablet-Locations)

alexleedds.com-05-min.png

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

Link to comment
On 4/30/2021 at 12:55 AM, Woorito said:

@tuanphan

thank you!

and yes! What do you recommend for those small problems? I’m open to any and all suggestions. First website so trying to learn!

Q1. Q2. It looks like you solved?

Q3, 4, 5. Add to Design > Custom CSS

/* Tablet issues */
@media screen and (max-width:991px) and (min-width:768px) {
/* about */
div#page-section-60760bb305ef932d220b92dd .span-12>.row .col {
    width: 100%;
}
div#page-section-60760bb305ef932d220b92dd .span-12>.row .span-1 {
    display: none;
}
/* cv */
[data-section-id="60885afcb752b23497db0419"] .content {
    width: 100% !important;
}
/* locations */
div#block-0732a935fe81a16dca85 h2 {
    margin-left: 0 !important;
}
}

 

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

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.