Archived

This topic is now archived and is closed to further replies.

  • 0

Boxes id


Question

Posted · Report post

On this site I am having some issues with the boxes on the page not lining up with everything else. I am in the latest version of Pagelines Framework.

 

Website: http://www.family-classics.com/

 

I want the left side of the orange bar that says "Share your Family Classic" to line up with the left side of the box below it.

 

I tried the below code to shift the food photos to the right:

 

#boxes .content-pad {
    padding-left: 35px;
}

 

But since the "Share your Family Classic" bar is also a box, it shifts everything right. Duh! Since I have two sets of boxes, I know I need to somehow call out the Boxes ID of only the bottom set. Where do I find the box set ID number?

 

Thanks!

Share this post


Link to post
Share on other sites

10 answers to this question

Posted · Report post

Just in case anyone else runs into this same problem. I ended up changing the first "Share your Family Classic" orange area from a Box to a Callout and uploading a custom Callout button.

 

This allowed me to still use this for the boxes:

 

#boxes .content-pad {
    padding-left: 35px;
}

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks James! Ok, I feel like I am on the right track. I do have Firebug installed and did see the box set I want to add padding to is:

".container clone_1 section-boxes fix"

 

But, while I know basic CSS, like referencing sections and div-id, I'm not quite getting how I reference a class within a section. And I can't figure out what to google to figure it out!

 

Here is my try that does not work:

 

#boxes  .container clone_1 section-boxes fix {
    padding: 30px;
}

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

If I understand this correctly, you want the orange backgrounded area (an image) to align left, flush with the left edge of the boxes below that.  Is my understanding correct?

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks for the update 

Share this post


Link to post
Share on other sites

Posted · Report post

Using Firebug, I found this:

.top_thumbs .fboxgraphic, .only_thumbs .fboxgraphic {
    text-align: center;
}

But when I changed it to

.top_thumbs .fboxgraphic, .only_thumbs .fboxgraphic {
    text-align: left;
}

The image moved left to fill the entire space, but because it's a fixed image, not a dynamic background color filling the space, it did not stretch edge to the maximum reach of the space on the right.  Still, it lines up on both sides.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Rob -

 

I want the Features box, the orange box and the Recipe photos all to line up. I want to keep the orange box where it is and have the Recipe boxes scoot to the right.

Share this post


Link to post
Share on other sites

Posted · Report post

If you can shoot me a mock-up, I'll see what I can do!

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks, I just sent you a message.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Bauerhaus.

 

The format for adding the clone class in the css will be like

 .clone_1 .section-boxes {border:1px solid black;}

Share this post


Link to post
Share on other sites