Place right sidebar next to boxes on home page

[antonella 1]

Hello, On our home page, we would like to create the following structure: row 1: feature row 2: 3 boxes + right sidebar starts I can't figure out how this would be done to get the sidebar to move up alongside the boxes. Ideally, I would even like the sidebar to move up alongside the feature slider as well. I've seen other posts that explain how to reduce the width, but the button bar below the feature doesn't reduce nor does the sidebar slide up. Any ideas of how this could be done? I've tried many options within the settings and I haven't come up with anything on the forums. Thanks.

[catrina 103]

The original idea mentioned can be done with CSS (reducing the width of the 3 boxes and their container and repositioning the sidebar). Can you post a link to your site?

[antonella 1]

Hi, I'm still very early in the process and am working with the demo content from platform pro: Here's the link. I would like that tertiary sidebar box to move all the way up. Thanks.

[catrina 103]

Add this CSS to Settings > Custom Code > CSS and save to reduce the size of the boxes:

#boxes div.dcol_container_3 #fbox {width: 22%;}

If you like the way that looks, we can move the sidebar up.

[antonella 1]

Hi again, I put this in the Custom Code, but it doesn't seem to be doing anything.

[catrina 103]

This one should resize the first top left box:

#boxes div.dcol_container_3 #fbox_11 {width: 22%;}

If this code works, I can provide the code that can work for the rest of them.

[antonella 1]

Okay, now I see it working. It only affects the first box in a block of 6 boxes. How do I get all the boxes this size? Thanks, Antonella

[antonella 1]

Hi, I think I just figured out how to adjust all the boxes. I looked for the box id and added that to the css. Is this correct?

#boxes div.dcol_container_3 #fbox_11,
	#boxes div.dcol_container_3 #fbox_9,
	#boxes div.dcol_container_3 #fbox_928,
	#boxes div.dcol_container_3 #fbox_716,
	#boxes div.dcol_container_3 #fbox_10,
	#boxes div.dcol_container_3 #fbox_843 {width: 20%;}
	

Next step is how to get the right sidebar to wrap around there? Thanks.

[Kate 3]

Hi Antonella, That will work, yes. Or, you could use the class assigned to the boxes so that you don't have to modify the CSS if/when you add another box I would try something like this instead:

.page-id-1454 .fbox{width:210px !important;}
	.page-id-1454 #sidebar-wrap{margin-top:-470px;}

[antonella 1]

Thanks! That seemed to do the trick. Any suggestions on how I can reduce the width of the sidebar? I've been trying different versions of the following, to no avail: .page-id-1454 #sidebar-wrap {width:280px;} .page-id-1454 #sidebar_tertiary {width:280px;} .page-id-1454 #scolumn-pad {width:280px;}

[antonella 1]

I was able to reduce the width using sidebar1. But then it overlapped into the boxes and there was a large right margin. I played around until I got it to look the way I wanted, but wanted to check that how I did it was okay. I basically added a float:right on the sidebar tag and a margin-right:20px to add more space between the boxes. This is the CSS I've ended up with: .page-id-1454 .fbox {width:230px !important; margin-right:20px;} .page-id-1454 #sidebar-wrap {margin-top:-476px;} .page-id-1454 #sidebar1 {width:230px !important; float:right;} Does that look okay or is there a better way to do it? Thanks.

[Kate 3]

Seems fine to me

[hitnrun822 0]

Hi guys! I cant seem to get this done. Please help! http://namjek.com/en/store