Align feature boxes with quick slider side by side?

[nicolerazek+ 0]

Hello,

I want my feature boxes to line up with my quick slider, not underneath of it. I set the slider to float right and the box to float left and that worked but is there anyway to get them to line up side by side??

Thanks!!

Nicole

[James B 436]

Hi Nicole, you could try using css to align them. Possibly using negative margins to move one up into alignment with the other, but this might mess up when the site moves into a mobile layout if the site is responsive.

Do you have a live link we could look at? That way we might be able to suggest something else which could work for you :-)

[pagelines_45 0]

Hi James I am trying to do the same thing: have my features slider and box horizontally next to each other. I was able to add this code to reduce the width of the slider but then lost my sidebar. So once I reduce the width of the slide I need to get a box up there to fill in the space (See attached mock up of what I am trying to accomplish). There are some many features in Pagelines I might be missing something.

Underconstruction Site: seafevergear.com/wordpress/

Code:

#feature_slider div.default-features {width: 300;}

#feature-area {width: 300px}

.home #feature-footer {width: 300px;}

.home #feature_slider{width:300px;}

.home #sidebar-wrap{margin-top:-680px;}

.home #feature-area, .feature-wrap {width: 300px;}

.home #feature-footer {width: 300px;}

Thanks for you help!

David

[catrina 103]

@pagelines_45 To get that one box up there to the right side of the feature slider, you'll need to use CSS for that specific box (each box has a unique class like fbox_# - # should be an ID number).

[pagelines_45 0]

Catrina, thanks! I have been using custom code a bit, but where do I find this css that you mention, is it in Appearance/Editor? If so where. Thanks!

[catrina 103]

@pagelines_45 The CSS needs to be added to Custom Code > Custom CSS. For further instructions, please see: http://www.pagelines.com/wiki/Custom_CSS

[WebIT 3]

Could you guys share how you did this?

[Danny+ 1,327]

Hi,

This would require quite a lot of custom CSS to achieve this layout.

What you would need to do is first target your Feature Slider and use custom CSS to reduce the size ( if needed ) and position it correctly.

Then you will need to target your Box(es), each box is given a unique ID, you can use this ID to target an individual box. Use this to style a specific box and add custom CSS to position it.

However, there is a really simple alternative method.

What you could do is, use the PageLines grid and replace the Feature Slider with the Carousel shortcode and replace boxes, with simply HTML.

Then you can achieve this layout with requiring any custom CSS (possibly)

Below is an example:

<div class="row">

<div class="span8">


Carousel shortcode goes here


</div>

<div class="span4">


Box replacement HTML here

</div>

</div>

[/CODE]