Forums

J4B

Hello,

I am here to ask for help, rarely done (that's me asking for help, well not in the public domain)

For the love of God, I have spent near on the last three hours trying to find a solution to this problem, I am really hoping someone can tell me what I am doing wrong, because for the love of God, I am extremely close to going mad.

I digress, please find below issue

I am making my site responsive, not issue with anything at all bar one problem

I have a background image for the footer, ad this BG image is a problem when viewed at width 480px to 767px

The problem is, the right side of the BG image is being cropped basically, its like margin or padding are being applied to the right side of the image, its not fitting the screen.

I am fairly confident that the issue is viewport related, but how I resolve it, I can not figure out

A brief synopsis of the site structure

<body>
    <div class="container">

    </div><!--End container-->

    <div id="footer-wrap">
        <footer class="footer-inner">

            <section class="foo1">

            </section>

            <section class="foo2">

            </section>


    </div><!--End footer inner-->
    </div><!--End footer wrap-->

</body>

CSS

body {
    background-color: #fff;
    color: #8f8f8f;
        -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
        -webkit-text-size-adjust: 100%;
}

.container {
    width: 940px;
    margin: 0 auto;
}

#footer-wrap {
    width: 100%;
    float: left;
    background: url(../img/ui/footer_bg.jpg) repeat;
    position: relative;

}

.footer-inner {
    width: 940px;
    margin: 0 auto;
}

Applied to the head

Tried this within the media queries

@media only screen and (min-width: 480px) and (max-width: 767px){
    #footer-wrap {
    width: 100%; }

}

And this also

@media only screen and (min-width: 480px) and (max-width: 767px){
    #footer-wrap {
    width: 767px;} /*Just to even fit the screen*/

I have tried adding negative margin to the right side of the wrapper container, has not worked.

I am sure someone here will tell me how stupid I am being as how easy the fix is, well I am hoping that's the case, cause I am sure its a straightforward issue to resolve, but not in my state of mind at the moment.

I am hoping one of our American friends will help me, I am off to bed and will tackle this again first thing in the morning

Thanks in advance

John

TheDoc

I'm not really sure what the problem is. Do you have a link? Can you provide a screenshot of the problem?

If you just want to center the background, you can just use `background-position: center center;'.

But I'm just not really sure what the problem is!

J4B

The site is offline Doc, but of course I will throw it up on my server later and let you have a look, I have a fresh head on this morning, so I am sure with a little clarity I will resolve the issue ,and well then again maybe not.

Let us know when you are online, I will check back this afternoon, and will forward you a link

Thanks in advance

John

J4B

Here is a life visual on a Samsung Galaxy Tab 10.1 .... Only happens in Portrait mode obviously, wont repeat problem in any tablet emulator, as to be expected

[IMG]http://i300.photobucket.com/albums/nn35/johnirelandphoto/footer_bg_zpsc6255fd1.jpg[/IMG]

And a graphical representation of problem

[IMG]http://i300.photobucket.com/albums/nn35/johnirelandphoto/iPad_zps06a0fb0e.jpg[/IMG]

If anyone else can shed some light, please do

Cheers

John

Paulie_D

I know this is probably a silly question but:

#footer-wrap {
    width: 100%; /* not necessary...it will automatically be 100% wide */
    float: left; /* not necessary for a div that is 100% of the screen width */
    background: url(../img/ui/footer_bg.jpg) repeat;
    position: relative; /* Why? Unless you are positioning items absolutely inside it */
}

If the div is alway supposed to be 100% wide there would be no reason to change it in any media query.

The INNER footer width maybe...but not the wrapper.

J4B

The width 100% was an after addition, yes originally it was not there, but I read online that the view port must see some size ... I don't 100% get it, regardless ,without the width attribute, I still have the problem, i even added the view-port size

Float left is habit (I have tried without the float, no difference)

Yes, I never added any condition within the media query originally, as you rightly say its 100%, with or without the 100% (as I said, originally I had no width parameter as it was just a repeat)

I actually originally had

#footer-wrap {
background: url(../img/ui/footer_bg.jpg) repeat; }

But I have tried everything, I have read online a magnitude of solution to similar issues, but none fix the problem

I just don't get it, its a BG image for christ sake that needs to repeat

Paulie_D

Repeat is the default option so you really don't need it You could try it without it.

However, it'd definitely the width that is causing the issue.

Have you tried min-width:100% on the wrapper?

Paulie_D

I also assume that you have "device-width" meta line in your document 'head'?

J4B

Hi Paulie

Tried it with and without repeat. actually added a fixed height to the footer and tried repeat x on its own (why I don't know but I was going a little mad last night)

Yes, sure have "device-width"

Tried with and without the scale, thought if they could zoom, it might help

No was the answer

J4B

Going to try min-width:100%, haven't tried that yet

J4B

Hallelujah .....

Got it, the only thing I had not tried .... min-width:100% ... Seems obvious, or then again not, either way, it worked

Thanks a million for your help Paulie, very much appreciated

Regards

John

Paulie_D

Praise the Lord :P

You are very welcome.

treehouse : what would you like to learn today?

Forums

[Solved] image repeat on screen max-width: 767px