- This topic is empty.
-
AuthorPosts
-
February 13, 2013 at 8:24 pm #42716J4BMember
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
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
February 13, 2013 at 10:14 pm #124518TheDocMemberI’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!
February 14, 2013 at 4:38 am #124550J4BMemberThe 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
February 14, 2013 at 4:52 am #124552J4BMemberHere 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
And a graphical representation of problem
If anyone else can shed some light, please do
Cheers
John
February 14, 2013 at 5:16 am #124555Paulie_DMemberI 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.
February 14, 2013 at 5:29 am #124561J4BMemberThe 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
February 14, 2013 at 6:03 am #124566Paulie_DMemberRepeat 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?
February 14, 2013 at 6:06 am #124567Paulie_DMemberI also assume that you have “device-width” meta line in your document ‘head’?
February 14, 2013 at 6:49 am #124569J4BMemberHi 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
February 14, 2013 at 6:49 am #124570J4BMemberGoing to try min-width:100%, haven’t tried that yet
February 14, 2013 at 7:16 am #124574J4BMemberHallelujah …..
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
February 14, 2013 at 7:25 am #124576Paulie_DMemberPraise the Lord :P
You are very welcome.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.