Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Dec 2012
    Posts
    121
    Thanks
    15
    Thanked 1 Time in 1 Post

    Footer not sitting correctly

    Hiya,

    I am tidying up the responsiveness on my website. I am currently working on 320px-480px and have noticed my footer is playing up in two of my pages.

    The website link is here.

    The two pages that I am having problems with are:-

    - Gallery: footer sits half way up the page
    - Products & Styles: Footer looks like it's sitting outside of wrapper.

    Can anyone help please?

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Location
    London
    Posts
    333
    Thanks
    63
    Thanked 11 Times in 11 Posts
    The footer is in exactly the same place on each page that I've viewed, on my browser (Firefox).

    However, if you post some code then it would be helpful.

  • #3
    Regular Coder
    Join Date
    Dec 2012
    Posts
    121
    Thanks
    15
    Thanked 1 Time in 1 Post
    Hi Paddyfields, are you resizing the window as the issue is currently only when it's at 320-480px

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Location
    London
    Posts
    333
    Thanks
    63
    Thanked 11 Times in 11 Posts
    Sorry I saw you were talking about a small screen width. Yes, it does as you said for both. But again you need to post your code.

  • #5
    Regular Coder
    Join Date
    Dec 2012
    Posts
    121
    Thanks
    15
    Thanked 1 Time in 1 Post
    Ok my css is this

    Code:
    /*** Master Footer *******************************/
    #sloganfoot {height:62px; font-family:"Georgia", Times New Roman, Times, serif; font-weight:200; font-style:italic; text-align:right; background:url(../img/sloganbg.png) repeat-x; -webkit-border-radius: 12px; border-radius: 12px; line-height:46px; color:#f8f6cf;  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display:block; width:100%; font-size:17px; z-index:50;}
    footer#mastfooter {margin-bottom:20px;}
    #designer a,a:link,a:visited,a:hover,a:active{color:#f8f6cf; text-decoration:none;}
    #copyright{float:left; margin-top:10px; margin-left:15px; color:#f8f6cf; font-size:12px;}
    #designer{float:right; margin-top:10px; margin-right:15px; color:#f8f6cf; font-size:12px;}
    
    @media screen and (min-width:320px) and (max-width:480px){
    #sloganfoot {height:62px; font-family:"Georgia", Times New Roman, Times, serif; font-weight:200; font-style:italic; text-align:right; background:url(../img/sloganbg.png) repeat-x; -webkit-border-radius: 12px; border-radius: 12px; line-height:15px; color:#f8f6cf;  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display:block; width:90%; font-size:12px; z-index:50; margin:0 auto; margin-top:0px;}
    footer#mastfooter {margin-bottom:20px;}
    #designer a,a:link,a:visited,a:hover,a:active{color:#f8f6cf; text-decoration:none;}
    #copyright{float:left; margin-top:20px; margin-left:5px; color:#f8f6cf; font-size:12px; text-align:left;}
    #designer{display:none;}
    }

  • #6
    Regular Coder
    Join Date
    Dec 2012
    Posts
    121
    Thanks
    15
    Thanked 1 Time in 1 Post
    Seems strange.... I thought it might have been something to do with my template but most of them are using the same layout, very confused

  • #7
    Regular Coder
    Join Date
    Dec 2012
    Posts
    121
    Thanks
    15
    Thanked 1 Time in 1 Post
    seems the problem is the gallery thumbnails as I have taken them out and it was fine.

    Thumbnail html is:-

    Code:
    <div class="gallerybox">
    <a href="http://kerrylouisebespokesoftfurnishings.co.uk/gallery/blinds/"><img class="alignnone size-full wp-image-403" alt="thumbnail-blinds" src="http://kerrylouisebespokesoftfurnishings.co.uk/wp-content/uploads/2012/11/thumbnail-blinds.jpg" width="150" height="150" /></a>
    <h2>Blinds</h2>
    <div class="galleryboxdesc">
    <h5><a href="http://kerrylouisebespokesoftfurnishings.co.uk/gallery/blinds/">View Gallery</a></h5>
    </div>
    </div>
    The CSS is:-
    Code:
    /*** Gallery // thumbnails *******************************/
    .gallerybox{height:230px; max-width:150px; float:left; margin-right:15px;}
    .gallerybox2{height:220px; max-width:150px; float:left; margin-right:15px; margin-top:-15px;}
    .gallerybox3{height:170px; max-width:150px; float:left; margin-right:15px; margin-top:-15px;}
    .galleryboxdesc{height:50px; width:150px; float:left; margin-right:15px; margin-top:-10px; margin-bottom:10px;}
    .galleryboxdesc2{height:50px; width:150px; float:left; margin-right:15px; margin-top:-10px; margin-bottom:10px;}
    .galleryboxwrap{float:left; margin-bottom:20px;}
    .dividergallery{height:5px; margin-bottom:0px; float:left; width:100%;}
    .divider{border-bottom:solid 1px #ccc; margin-bottom:10px; float:left; width:100%;}
    Have I missed something?


  •  

    Posting Permissions

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