Jump to content


Photo
- - - - -

Align feature boxes with quick slider side by side?


  • Please log in to reply
7 replies to this topic

#1 nicolerazek

nicolerazek

    Newbie

  • Members
  • 4 posts
  • Country: Country Flag

Posted 15 October 2012 - 10:23 PM

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

#2 James B

James B

    Advocate

  • Moderators
  • 4983 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 16 October 2012 - 02:30 AM

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

#3 pagelines_45

pagelines_45

    Member

  • Members
  • 19 posts
  • LocationBoston, MA
  • Country: Country Flag

Posted 25 October 2012 - 05:56 PM

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

Attached Files



#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 25 October 2012 - 06:45 PM

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

#5 pagelines_45

pagelines_45

    Member

  • Members
  • 19 posts
  • LocationBoston, MA
  • Country: Country Flag

Posted 25 October 2012 - 07:00 PM

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!

#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 25 October 2012 - 07:11 PM

@pagelines_45 The CSS needs to be added to Custom Code > Custom CSS. For further instructions, please see:

Please Login or Register to see this Hidden Content



#7 WebIT

WebIT

    Super Member

  • Members
  • 232 posts
  • LocationCape Cod
  • Country: Country Flag

Posted 01 November 2012 - 07:40 PM

Could you guys share how you did this?

#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 13192 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 04 November 2012 - 11:53 AM

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:

Please Login or Register to see this Hidden Content