Centering the Slider image area

Discussion in 'HomeBuilder WordPress Theme' started by shetlerr, Aug 1, 2013.

  1. shetlerr

    shetlerr New Member

    Joined:
    Jul 27, 2013
    Messages:
    25
    Likes Received:
    0
    Working on a site at buildmylakehouse.com using wordpress and you helped me by taken some of the property listing out of the front page this was very helpful and thanks. Need to know how to center the box that displays random photos and get ride of the black mark highlight under the image. Just want to center the image box so the photos rotate through the slider in the middle of the page.
     

    Attached Files:

  2. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
    Hello,
    We have visited your website and found that the theme layout has been broken due to customization in the theme by you.
    See the image link given below
    http://screencast.com/t/IF3uGn39IrA

    So, firstly Undo all the customization that you have done previously and
    then paste the code given below in Custom CSS
    Appearance > Theme Option > Styling Option > Custom CSS
    Code:
    .slider-info {
    display: none;
    }
     
    .slides_container {
    width: 920px;
    }
    .slides_container div.slide img {
    width: 920px;
    }
    This will solve your issue.
     
  3. shetlerr

    shetlerr New Member

    Joined:
    Jul 27, 2013
    Messages:
    25
    Likes Received:
    0
    Did all above and now its makes any image within the box area to large and stretched. I removed the browse listings with help from one of your techs. Just need to center this area with some room on both sides and the photo in the middle. Will leave what the site looks like for you to see.
     
  4. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
    Hello,

    You can use bigger image ( of dimension 920 x 415 pixel) for the slider, so that slider will look better.
    Or
    If you still want the slider image to be in the center then follow the instruction given below
    1 Remove the code given below from Custom CSS
    Appearance > Theme Option > Styling Option > Custom CSS
    Code:
    .slides_container {
    width: 920px;
    }
    .slides_container div.slide img {
    width: 920px;
    }
    
    2. And then paste the code given below in Custom CSS
    Appearance > Theme Option > Styling Option > Custom CSS
    Code:
    #container {
    left: 165px;
    }
    @media only screen and (max-width: 960px) and (min-width: 767px){
    #container {
    left: 0px;
    }
    }
    @media only screen and (max-width: 767px) and (min-width: 480px){
    #container {
    left: 0px;
    }
    }
    @media only screen and (max-width: 480px){
    #container {
    left: 0px;
    }
    }
    
    This will solve your issue.
     

Share This Page