Change Slider Dimensions

Discussion in 'Themia WordPress Theme' started by kmld_521, May 16, 2013.

Thread Status:
Not open for further replies.
  1. kmld_521

    kmld_521 Guest

    Joined:
    May 12, 2013
    Messages:
    24
    Likes Received:
    0
    How can I change the slider demensions on the front page in a way that the mobile theme will respond to?

    I changed the dimensions in css but it does look good on my phone...
     
  2. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
  3. ajbm1

    ajbm1 New Member

    Joined:
    Apr 19, 2013
    Messages:
    1
    Likes Received:
    0
    Hi I would like to actually "slow down" the rotation speed of my slider that the images transition to (if that makes sense)

    where in the theme editor / code do i do this?

    Sorry for not posting in a new thread, i just thought it was such a close subject.

    AWESOME theme by the way! please pass on my congratulations to the creators! its the best one I have bought to date, I will be looking at ink htemes first next time i need one in the future, great stuff!

    the site is
    http://contentlogistics.com.au
     
  4. kmld_521

    kmld_521 Guest

    Joined:
    May 12, 2013
    Messages:
    24
    Likes Received:
    0

    Sorry Piyush, new to all of this. I am using a child theme of Themia Pro at
    http://cem.carrielizabethmarketing.com

    I took the slider code and moved it the header changing the "355" height value to "110" for all 4 slides.

    I also changed the height value of these attributes in css:


    #slides {
    top:15px;
    left:4px;
    z-index:100;
    height: 110px;
    }
    #slides img {
    width: 928px;
    height: 110px;
    }
    #slides iframe {
    width: 928px;
    height: 110px;
    }
    .slides_container {
    overflow:hidden;
    position:relative;
    display:none;
    height: 110px;

    I also see the attributes for (what i think is) the mobile responsive code under
    "/* This query is applied for protait ipad, Mobile*/" in style.css but I am not sure what values to use for height.​

    Not sure if I am way off base with this...I am new to code and learning so much through the altering of your beautiful themes!

    Thanks,
     
  5. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207
    Go to Js > Custom.js present in your theme directory
    and adjust the value of Play by increasing the value the slider speed decreases,and by decreasing the value the slider speed increases .

    Sending image for reference

    [​IMG]
     
  6. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207
    Paste this code in Custom CSS
    Appearance > Theme Option > Styling Option > Custom CSS

    Code:
    @media only screen and (max-width: 960px) and (min-width: 767px){
    #slides img{
    width:735px!important;
    }
    }
     
    @media only screen and (max-width: 767px) and (min-width: 480px){
    #slides img{
    width:449px!important;
    }
    #main {
    height: 110px;
    }
    }
    @media only screen and (max-width: 480px){
    #slides img{
    width:253px!important;
    }
    #main {
    height: 110px;
    }
    }
    This will solve your issue.
     
    kmld_521 likes this.
  7. kmld_521

    kmld_521 Guest

    Joined:
    May 12, 2013
    Messages:
    24
    Likes Received:
    0


    Yes it did! Ty again.

    Is there a way to tighten up the space between the slider and the header logo and menu? I do not mind removing the shadow under the slider if that is needed.

    :)
     
  8. Nitesh

    Nitesh Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    5,165
    Likes Received:
    160
    Hello,

    I have checked your site and i think you have removed spacing by yourself.
    Please do contact for further queries.
     
  9. kmld_521

    kmld_521 Guest

    Joined:
    May 12, 2013
    Messages:
    24
    Likes Received:
    0

    Hello again! I am still getting a large space between the slider and the menu/logo when viewing the site on an ipad. I have moved the slider code to the header.php using a child theme.

    The site is http://carrielizabethmarketing.com. I have applied the css mentioned previously in this post but the issue persists. How can i fix it?

    Thanks!
     
  10. Nitesh

    Nitesh Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    5,165
    Likes Received:
    160
    Hello,

    Paste this code in Custom CSS
    Appearance > Theme Option > Styling Option > Custom CSS

    Code:
    @media only screen and (max-width: 960px) and (min-width: 767px){
    .slider_wrapper {
    width: 758px;
    height: 0px;
    }}
     
    kmld_521 likes this.
  11. kmld_521

    kmld_521 Guest

    Joined:
    May 12, 2013
    Messages:
    24
    Likes Received:
    0

    Thanks!

    I had to switch it to:

    @media only screen and (max-width: 960px) and (min-width: 767px){
    .slider_wrapper {
    width: 758px;
    height: 135px;
    }}

    and the issue was solved!

    Thanks again for your quick reply.
     
Thread Status:
Not open for further replies.

Share This Page