Jump to content
Sign in to follow this  
jennajonesdesign

Extra Wide Slider?

Recommended Posts

jennajonesdesign+    15
jennajonesdesign

Hello All!

 

I am hoping to make my featured slider wider than the main content of the rest of my site. Here is an example of a design like this. Can anyone tell me how to do this? (I am good with firebug). 

 

http://twigsandposies.com/

 

THANK YOU!

 

Jenna

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hi Jenna,

 

I've tested it as much as I know how, but can't make the slider any wider than the container in which it sits.

 

That said, it's possible to narrow down the other parts of your site using CSS by increasing padding, margins or changing the percentage of width (for the individual sections).

 

So, let's say you have a 1000px wide layout.  You could apply a slider in Page Templates, at 100%. Your header could be made 94%,  along with the content area below the slider.  That would let someone see the slider in a way similar to the one you've used as an example. You just have to be very careful when selecting the exact CSS elements to modify.

 

Also consider that if using padding (possibly margins, too), the background of that are may stretch to match the width of the slider.  You may have to adjust the way you create your background colors and images.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
jennajonesdesign+    15
jennajonesdesign

Thanks so much for your response. That is the conclusion I was coming to as well. I think I will just go with the Wicker slider. ;) Still has impact and then I won't have to mess with it. 

Share this post


Link to post
Share on other sites
Rob    547
Rob

Jenna, not messing with things is always better than messing! Good choice!


Former PageLines Moderator, Food Expert and Raconteur

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

Sign in to follow this  

  • Similar Content

    • thirdstonemedia
      By thirdstonemedia+
      I've been fighting with a resolution issue ? Want to use Flick Slider, the site looks great on my monitor but client says she can't see bottom of homes. I believe she's on an old PC using outdated browser/s ... but, she's important to me and I'd like to make this work, on her system. Without asking her adjust her own set-up. 
      I put the Flick Slider inside a container, here ::
      http://becauze.xyz/home-five
      Set the Height of Flick Slider to 50 Base ... I don't know how this works exactly ... there is a Base then a Min ... but, haven't adjusted the Min ::
      http://becauze.xyz/home-four/
      Tried using Splash Up, which presents the same issue (she can only see top of home) and she wants several images to rotate on Home page, so not sure this would work anyway ::
      http://becauze.xyz/
      I have tried going into Layout and making the width narrower, and that does make the site narrower, but the homes still don't display in full, on her system. Help ?

      Here are her screen grabs, both desktop and iPad  (dumped the chalkboard background).

      FInally, she said these look great ::
      http://www.sinclairaia.com/
      http://www.kristihanson.com/
      What am I doing wrong ?? Is there a better way to accomplish making the site look great on any resolution at any size ?
      Joanne
      (Longtime Pagelines-lover.)


    • wyo22ski
      By wyo22ski+
      Hello,
       
      I'm basically a designer and understand a little on how to change CSS, etc., so please excuse my ignorance...  I recently upgraded to the newest platform from the DMS and my old DMS theme no longer functions.  I'm trying to replace the image slider that my Horizon Photography Theme (Nick Haskins) had created.  The Impulse image slider seemed the closest to what I need, but there are problems.
      It seems the the Impulse section for sliding images defaults to the image width, no the height.  I can change the Impulse stage height and width, but this does nothing to the internal content.  For instance, if I change the height to 200 pixels, the image remains the full width and only shows a cropped section.  I would like the ability to change the Impulse height, and have the image height fit space. 
      I've put this custom CSS in, but again, this only controls the stage height of Impulse:
      .pl-sn-impulse .pl-impulse-cell .cell-wrap, .pl-impulse-container, .owl-stage-outer {
        width: 100%;
      }
       
      Any suggestions welcome.  Thanks 
    • GreyFoxWebDesign
      By GreyFoxWebDesign+
      Hi, so I have an issue that seems specific to iPhones.
      I have 2 "Menus" in a container both set to 6 columns (see image A) - I have added the classes .menuleft and .menuright
      When this gets to 768px and the mobile menu kicks in, both sections revert to 12 columns (or 100% width) so the 2 menus are stacked on top of each other. I want them to remain inline so that they look like image B - so need to control the section width.
      I have added the following CSS:
      .menuleft[class*='pl-col-'] {
        max-width: 22%;
        margin-left: 3%;
        padding-right: 0em;
        padding-left: 0em;
        float: left !important;
      }
      .menuright[class*='pl-col-'] {
        max-width: 74%;
        margin-right: 1%;
        padding-right: 0em;
        padding-left: 0em;
        float: left !important;
      }
      This works well for Android phones, on all online emulators and in Chrome mobile inspector, but does not seem to work on iPhones. I don't have an iPhone so it's very hard to test. Any help would be appreciated. The site is currently live at quitegoodcards.com.
      PS Is there a way to target the li items in the mobile menu toggle (image C) that does not effect the desktop li? There doesn't seem to be a separate class to apply.
      Thanks in advance



    • liberatedspaces
      By liberatedspaces
      My site (http://caffefioresf.com/) started having a couple of weird problems on my home page all of a sudden, without me doing anything. It's run on the latest version of Pagelines Framework.
      1. My Facebook widget that is set to the secondary sidebar to the right of the page content (the info and Open Table widget) is dropping down into the box section
      2. The box section below the content is no longer conforming to the global content width set to 960px in the Site Option Layout Editor and stretching out to the edge of the browser on both sides.
      Any help would be much appreciated!

    • John Olsson
      By John Olsson+
      The screen width of the layout won't stick, it just goes back to "default", tried everything, bot nothing works, not even fullscreen och other choices when i drag the container.
       
      It doesn't matter if I change the layout presets, as seen in the attach screenshot.
       
      I have all the latest themes/plugins, etc..
       
      This is across all my sites.. about 40 of them.. all..
×