Jump to content

Possible to group blocks within a container?

Recommended Posts

I've seen other website builders that allow you to create an empty container object and then place other objects within it to keep them grouped as a unit.

I'm wanting to put some text, an image and a button in a container and style the container background to create a "card" effect. I assume this is possible with a code block but I'd prefer something that's easier to edit since I'll be making changes to these somewhat frequently.

Link to comment
  • Replies 15
  • Views 5.9k
  • Created
  • Last Reply
8 minutes ago, mrjack16 said:

Exactly like that! How would I add some outside padding on these?

div#page-5c4b76d0898583b89b348bb0 .span-4 {
    border: 1px solid #fff;
    box-sizing: border-box;
    border-radius: 10px;
    padding: 10px;
    background: #f5f 7;
    width: 30%;
    margin: 2% 1.5%;
}

play with width and margin

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
6 minutes ago, mrjack16 said:

Well, in typical squarespace fashion, it seems that editing the page results in breaking the div targeting. Can you tell me where to find the correct ID to update the CSS? I'm not sure what I'm looking for.

I don't quite understand your question...

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 removed the line blocks that were separating each section and it broke the CSS I just added so the new style is missing. Is it the the "div#page-5c4b76d0898583b89b348bb0" or  ".span-4" that changed? I don't know but I need to know how to update the CSS whenever I make changes to this page.

Link to comment
5 hours ago, mrjack16 said:

I'm 99% there... one more question, how that I have the margin and padding where I want it, what's the preferred method of getting everything centered on the page?

play with padding left

/* Desktop */
@media screen and (min-width:901px) {
div#page-5c4b76d0898583b89b348bb0>.row>.col>.row {
    padding-left: 3%;
}
}
/* Tablet */
@media screen and (min-width:641px) and (max-width:900px) {
div#page-5c4b76d0898583b89b348bb0>.row>.col>.row {
    padding-left: 3%;
}
}

or 

use flexbox

@media screen and (min-width:641px) {
div#page-5c4b76d0898583b89b348bb0>.row>.col>.row {
    display: flex;
    justify-content: space-between;
}
}

justify-content can be space-between or center or space-around

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.