nicolerazek

Align feature boxes with quick slider side by side?

8 posts in this topic

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

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

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

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


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

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

Could you guys share how you did this?


Share this post


Link to post
Share on other sites

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]


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now