SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with homepage scaling...

    I have been customizing a Wordpress theme for a client and I can't seem to get the top of the homepage to scale correctly on my laptop or mobile. The rest of it is fine, seeing as it was coded by a pro I have a few elements going on in there, a slideshow, a logo, a background image, and a custom form built with gravity forms. I know if I play around with the background image I could probably get that to scale down using percentages. But since I have defined px sizes for the form and sliders, I am not sure how to make it all uniformly scale. Is this some basic css rules that I am missing or do I need to learn some responsive design techniques? Here is all the code so far...
    HTML and Shortcodes
    HTML Code:
    <div id="hlogo"><img src="http://www.amerikick.com/wp-content/uploads/2012/04/AmeriKick_Red_Home.png" style="width:514px; height:226px;" /></div>
    <div id="slideform">
    <div id="form">[gravityform id="2" name="Web Only Offer" title="false"]</div>
    <div id="slider">[slider]
    [slide url=http://www.amerikick.com/wp-content/uploads/2012/04/Kids-Martial-Arts.jpg]
    [slide url=http://www.amerikick.com/wp-content/uploads/2012/04/Character.jpg]
    [slide url=http://www.amerikick.com/wp-content/uploads/2012/04/Determination.jpg]
    [slide url=http://www.amerikick.com/wp-content/uploads/2012/04/Mixed-MA.jpg]
    [slide url=http://www.amerikick.com/wp-content/uploads/2012/04/Family_slide.jpg]
    [/slider]</div></div>
    Css
    HTML Code:
    .home #hero { 
    background: url(http://www.amerikick.com/wp-content/uploads/2012/04/AmeriKick_Red_72dpi.jpg) no-repeat scroll center top transparent;
    } 
    #hlogo{
    position:relative; 
    z-index: 9999;
     position: absolute;
     top: -20px;
     left: -430px;
    }
    
    #slideform{
    position:relative;
    z-index:10;
    }
    
    #slider{
    float:left;
    width:645px;
    height:435px;
    padding-right:15px;
    margin-left:-90px;
    margin-top:100px;
    border: 5px solid #CE0B0B;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color:#000000; 
    }
    /*Slider Arrows*/
    .dayd_slider .orbit-wrapper div.slider-nav {
     display: none;
     }
    
    #form{
    float:right;
    margin-right:-90px;
    margin-top:100px;
    }
    
    
    /* Gravity Forms*/
    body #gform_wrapper_2{
    width:420px;
    height:370px;
    margin-top:1px;
    padding:65px 20px 0;
    border: 5px solid #CE0B0B;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: url("http://www.amerikick.com/wp-content/uploads/2012/04/Web-Offer.png") no-repeat scroll center top #FFFFFF;
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    I don't thin we've got the whole picture there. Are you able to provide a live link? It would make it so much easier to help you.

    Edit:

    Duh ... the URL is there in your code. I'll have a look.

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I don't thin we've got the whole picture there. Are you able to provide a live link? It would make it so much easier to help you.

    Edit:

    Duh ... the URL is there in your code. I'll have a look.
    Oops...Guess that would have helped huh?! But the great Ralph.m conquered! lol Everytime I design on my big Mac (lol...big mac) I realize I need to change stuff when I look at it on laptop or phone. I really should make time to watch the responsive course I bought on Udemy.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    The first problem I see is that the logo is positioned way outside the container, so it will be off screen for a lot of users. It might be better to make it smaller and place it above the slider and form.

    Also, your slider and form together are too wide for the main container anyway. You either need to reduce their widths or work out some other layout for the top of the page.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by satori83 View Post
    Oops...Guess that would have helped huh?! But the great Ralph.m conquered! lol Everytime I design on my big Mac (lol...big mac) I realize I need to change stuff when I look at it on laptop or phone. I really should make time to watch the responsive course I bought on Udemy.
    Everytime I design on my big Mac (lol...big mac) I realize I need to change stuff when I look at it on laptop or phone.
    At a minimum, scale your browser wider and narrower to see what effect this has.

  6. #6
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So I should look at what size the existing container is and make sure all my code falls within those parameters? Also, is there any sort of rule of thumb when it comes to css to make sure it looks okay on other devices? Or is it just trial and error?

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by satori83 View Post
    So I should look at what size the existing container is and make sure all my code falls within those parameters?
    Yes, definitely. Some browsers won't even let the inner content be wider than the container.

    is there any sort of rule of thumb when it comes to css to make sure it looks okay on other devices? Or is it just trial and error?
    This is a bit topic. At the moment, there's a bit buzz around "responsive design", which is worth reading about.

  8. #8
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph! I worked on restyling and positioning the elements. It looks good on laptop, ipad, and phone What do you think?

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Certainly is better—well done.

    One thing I would recommend, however, is remove the logo from the background image and put it in the HTML itself, and include text with it (even if the text is hidden). The site name is very important (for SEO, accessibility etc.).

  10. #10
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The text above it that says Amerikick in the navbar is actually the logo area. Does that have the same power or no?

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by satori83 View Post
    The text above it that says Amerikick in the navbar is actually the logo area. Does that have the same power or no?
    Yes, sorry, I didn't see that. That is indeed all you need. The fact that it's in the <h1> is powerful. Forget what I said above.

  12. #12
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again for everything Ralph! Don't you ever sleep? lol

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by satori83 View Post
    Thanks again for everything Ralph! Don't you ever sleep? lol
    I sleep very well ... too well, indeed. I'm on the other side of the world from you. And it's bed time.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •