Jump to content

Image Block/List help with CSS

Recommended Posts

Site URL: http://hilarybeckwith.com/main-page

Hello - I have been trying various ways of manipulating CSS/trying different types of blocks to get the look and functionality of the website in the attached screenshot.

Can anyone help walk me through it?

I've tried a simple List, as well as three separate image blocks installed adjacent to one another. I don't necessarily need/want the number system, although it would be cool to know how to do that, too.

In the end, I'd like an outlined box with an image, text ON the image, descriptive text BELOW the image, and a BUTTON below that.  

I've looked at videos and have read articles, and I feel like I'm getting close, but don't know enough about this to quite get it right.  Please help??

 

Screen Shot 2021-08-27 at 3.17.13 PM.png

Link to comment
  • Replies 8
  • Views 973
  • Created
  • Last Reply

Top Posters In This Topic

Hi,

1. Add 3 Image Blocks

  • add image
  • add title
  • add subtitle
  • add links in subtitle (then we will give the code to turn link to button)

2. Share link to page where you added 3 image blocks. We will give the code to

  • add outline around 3 boxes
  • add 3 numbers
  • add 3 text over images
  • move button overlap outline

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

Hello! 

I installed the images. I wasn't sure how to add "title" and "subtitle" but I formatted them as Stacks and typed the title that i want aligned inside each image, and then the link, then the description below that, but I also want there to be a sort of title below the image as well. We'll cross that bridge when we get to it.

 

Thanks for your help! The page where I did this is http://hilarybeckwith.com/main-page

Link to comment
23 hours ago, hilaryb said:

Hello! 

I installed the images. I wasn't sure how to add "title" and "subtitle" but I formatted them as Stacks and typed the title that i want aligned inside each image, and then the link, then the description below that, but I also want there to be a sort of title below the image as well. We'll cross that bridge when we get to it.

 

Thanks for your help! The page where I did this is http://hilarybeckwith.com/main-page

Hi,

I see no text in image button. Can you add a text?

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

I added the text to the buttons. 

Can you also please help me with the single image block below the quote (same page)? I have it set to Overlay, but the body text has such a small space. I'd like it to be wider without changing the size of the image. Is there a way to do that?

Link to comment
15 hours ago, hilaryb said:

@tuanphan Hi Tuanphan - I was just wondering if there's a chance I could get a response soon? I've been working on it all day and cannot seem to find a solution, although as you can see I've made some progress. Please help!

I appreciate your time!

I sent code for text over image in your another post

With border, button over border, use this code

/* List Section */
[data-section-id="612ee2e62200bd4633622d9b"] {
li.list-item {
    border: 2px solid white;
    position: relative;
}
.list-item-content__button-wrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 9999;
    bottom: -20px;
}
.list-item-content__button-container {
    margin-top: 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

this applied the effect to the List I put in place of the images (because I have been trying to figure this out for days, and needed something rather than nothing). You instructed me to install images and  said that you would provide codes for different elements, but that's not what you did.

We discussed something entirely different, and I have been scouring codes and trying to get things to work on my own for days now, and am tired of the fight. This has been a total waste of time.

I give up.

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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