Viewing 8 posts - 31 through 38 (of 38 total)
  • Author
    Posts
  • #111915

    Hi Nick, I tried but everything got really funky and looked bad. So I cleared cache, jumped onto several browsers and tried again but everything was off still. I restored everything to default and tried using quick css.

    So using quick CSS instead, I made few edits and it is almost to where I want. But looking at my current site now http://goo.gl/jmUUN you will see few issues with slideshow and responsiveness:

    1) What css can I use to get the slideshow to be responsive but have max at width:940px; and height:400px; and aligned center?

    2) How can I also now make #top .callout responsive too?

    3) I just added top-margin:400px; to sidebar but I noticed all sidebars on other pages are 400px too. How can I apply only to homepage sidebar?

    Here’s a screenshot of my homepage goal using your demo:

    2h2hweg.jpg

    #111916

    Hi,

    Ok. Here it is. I tested it in /css/custom.css

    @media only screen and (min-width:960px) {
    #top.home .slideshow_container {
    width:940px !important;
    height:400px !important;
    }
    #top.home div .arrow_controls {
    bottom:30px;
    }
    #top.home .slideshow {
    height:400px !important;
    }
    #top.home .callout {
    font-size:22px;
    margin-top:10px;
    width:940px;
    }
    #top.home .inner_sidebar {
    padding-top:100px;
    }
    }
    @media only screen and (min-width:768px) and (max-width:959px) {
    #top.home .slideshow_container {
    width:738px !important;
    height:327px !important;
    }
    #top.home .slideshow {
    height:327px !important;
    }
    #top.home div .arrow_controls {
    bottom:30px;
    }
    #top.home .inner_sidebar {
    padding-top:60px;
    }
    #top.home .callout {
    font-size:22px;
    margin-top:10px;
    width:768px;
    }
    }
    @media only screen and (max-width:767px) {
    #top.home .slideshow_container {
    width:400px !important;
    height:200px !important;
    }
    #top.home .slideshow {
    height:206px !important;
    }
    #top.home div .arrow_controls {
    bottom:30px;
    }
    #top.home .callout {
    font-size:22px;
    margin-top:10px;
    width:419px !important;
    }
    }
    @media only screen and (max-width:479px) {
    #top.home .slideshow_container {
    width:340px !important;
    height:210px !important;
    }
    #top.home .slideshow {
    height:147px !important;
    }
    #top.home div .arrow_controls {
    bottom:70px;
    }
    #top.home .callout {
    font-size:18px;
    margin-top:10px;
    width: 380px !important;
    }
    }

    Thanks,

    Nick

    #111917

    Nick, is there a way to bring the sidebar down only on the homepage? Currently it is bringing it down on all pages too.

    Other than that, it is beautiful and perfect!!!

    Shop page:

    c?9343120=g5GlWlWwrjDHWL_ogzOsPy6jn48&f=.png

    #111918

    Okay, so I played around some more and just added the page-id to the quick css in front of sidebar and it worked!

    /*Lowers right sidebar on homepage down below slideshow*/
    .page-id-61 .sidebar{
    margin-bottom:40px;
    margin-top:395px;
    position: relative;
    display: block;
    }

    #111919

    Hi,

    Great. Site’s looking good. Glad you were able to figure out the css to fix it up. CSS is simple and when used along with the free Google Chrome Developer Tools plugin for the browser, changing css becomes simplicity itself. I am gonna close this support request since its getting a bit long, but if you have other questions, feel free to open another one.

    Thanks,

    Nick

    #111920

    Hi Nick, thank you again for all the help. Yes, I’m getting quite good feedback about the way the site is coming along — thanks to you guys!

    It really helps to use the INSPECT ELEMENT (Firebug, etc) but the one thing I get confused about is with how to figure out what DIV or CLASS to use and all the symbols such as #, @, . are pretty confusing at the moment. If you have a really thorough instructional page or video you can point me to on what this stuff means, that would probably help me from having to bug you guys so much!

    Thanks!

    #111921

    One last thing, if you try to resize browser like a mobile device size, the callout text on homepage gets cut off on the right. I tried to add right:auto; but that didn’t do anything. Any suggestions to make it responsive?

    #111922

    Hi,

    Don’t use firebug. Chrome Developer Tools are a lot better. Watch a tutorial on css with developer tools and just play with code, its quite easy editing it.. writing from scratch is not so easy.

    You need to add the css to the correct media query for the correct screen size, or you can always make up a screen size. max 479 is only for smart phones in landscape position. for smart phones in portrait position, need a new media query. You may need to play with these numbers , to get it just right, the 70px probably needs to be lowered a little. as well as the font size.

    @media only screen and (max-width:400px) {
    #top.home .slideshow_container {
    width:280px !important;
    height:119px !important;
    }
    #top.home .slideshow {
    height:119px !important;
    }
    #top.home div .arrow_controls {
    bottom:70px;
    }
    #top.home .callout {
    font-size:18px;
    margin-top:10px;
    width: 280px !important;
    }
    }

    Thanks,

    NIck

Viewing 8 posts - 31 through 38 (of 38 total)

The topic ‘Callout on Front Page’ is closed to new replies.