How to… fix a box?

[micheal_w]

Hi guys,

what is your recommendation, how to create a fixed (but somehow responsive box) like the attached?
See it here, towards the bottom: sample link

I have created a row with a photo background, it has been setup as full width.
So I have the base, but which option would be the best to create that box? I was thinking having a Icon box, but how the hell can I align it towards the right (not to the edge)?

Any other idea would be appreciated.
Thank you!

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Set the row to standard width, add the image as the background

– Kyle

[micheal_w]

Hi Kyle,
I think you misunderstood me…

Please check this link: http://shop.lululemon.com/p/women-crops/All-The-Right-Places-Crop-II/_/prod1550052?color=LW6HESS_023188&dtmPromoClick=design:fabrics-technology:luxtreme;womens-luxtreme-products;prod1550052
…and scroll down to the area where this part is: http://www.swiftideas.com/wp-content/uploads/2016/07/Screen-Shot-2016-07-15-at-10.48.13-PM.jpg

There is a image background (that is solved, I used a row with background image).
But as you can see on the image as well as on the link, there is a white box with text (starting with ‘DESIGNED FOR…’)

Any recommendation how can I create a similar text box that STAYS on the right side of the content area? (while the row is set to full width)… Pretty much same as the image above.

Thanks!

[Kyle – SUPPORT]

You could use the boxed content asset, however to get the similar list style you may need some custom css. As for achieving a white box, the boxed content asset will work just fine.

What I was saying in my previous post is in relation to this: ‘text box that STAYS on the right side of the content area? (while the row is set to full width)’ why do you have the row set to full width if you don’t want the content to be edge to edge? Set it to standard width

– Kyle

[micheal_w]

Hi Kyle,

I would like the background photo from edge to edge, that’s why I setup the row full width.
Can I set the row to standard width and have the image full width?

[Kyle – SUPPORT]

Yes the background is always full width, the width setting is for the content within the row

– Kyle

[micheal_w]

This reply has been marked as private.

[Kyle – SUPPORT]

1) The box is on the left?

2) Add this to your custom css:

.spb_parallax_asset .spb_box_content .box-content-wrap::after {
  border-bottom: 10px solid transparent;
  border-left: 10px solid #fff;
  border-top: 10px solid transparent;
  content: "";
  height: 0;
  position: absolute;
  right: -10px;
  top: 30px;
  width: 0;
}

– Kyle

[micheal_w]

Hi Kyle,

1) omg, I meant right sorry 🙂

2) is perfect, can I put it on the left please?

[Kyle – SUPPORT]

You sure you want it on the right? The leggings are on the right, so you’d be covering them up?

– Kyle

[micheal_w]

Hi Kyle,
yes to the right please, that is just a test pic right now… 🙂

[Kyle – SUPPORT]

Ok, on the box content asset add this to the extra class field: col-sm-offset-9

Change the css to:

.spb_parallax_asset .spb_box_content .box-content-wrap::after {
  border-bottom: 10px solid transparent;
  border-right: 10px solid #fff;
  border-top: 10px solid transparent;
  content: "";
  height: 0;
  position: absolute;
  left: -10px;
  top: 30px;
  width: 0;
}

– Kyle

[micheal_w]

Simply awesome!
Kyle, thanks so much!

[Kyle – SUPPORT]

No problem!

[micheal_w]

This reply has been marked as private.