Archived

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

  • 0

Align feature boxes with quick slider side by side?

Question

Posted · Report post

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

Share this post


Link to post
Share on other sites

7 answers to this question

Posted · Report post

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]

Share this post


Link to post
Share on other sites

Posted · Report post

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

post-33515-0-75768100-1351187702_thumb.p

Share this post


Link to post
Share on other sites

Posted · Report post

@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).

Share this post


Link to post
Share on other sites

Posted · Report post

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!

Share this post


Link to post
Share on other sites

Posted · Report post

Could you guys share how you did this?

Share this post


Link to post
Share on other sites

Posted · Report post

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 :-)

Share this post


Link to post
Share on other sites