Jump to content

Add Button Inside Text Block with Background Color

Recommended Posts

I created "cards" in a code block that I'm going to use to offer services. alt text

I have two issues that I need help with:

  1. I'd like the heights of the cards to be restricted, so they are all equal in size and line up.

  2. I want the "BOOK NOW" button INSIDE the cards, which I know needs to be done with code, since the cards were created with code. Any body know how I can do this and also keep the styling of the buttons the same as the rest of my button blocks throughout the site?

Here's the code I used to create the "cards":


<div class="grey">
<h3>header goes here<p>
subheader goes here  </p></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>

<style>
.grey { 
background: #ececec; 
padding: 50px; 
text-align: left; 
}
</style>

A million thanks to anyone who can help!!

screen-shot-2019-09-17-at-23237-pm.png.1b326411982db6c83dfdaae608a2a8c8.png

Link to comment
  • Replies 3
  • Views 1.8k
  • Created
  • Last Reply

@chocolatesalam so you can use 1. min-height with fixed pixels to equal all columns 2. remove current background, and set background for container contain (text & button)

Just some suggestions. Difficult to send exact code without site url.

You can also send me site url via my contact form. I can take a look.

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.