I'm building
my site using mybb. I made it responsive so width would scale with resolution.
I don't know why, but my site doesn't look good on chromes phone simulator. It has a lot of white space under the rest of the content. Why?
I have really tried to find out what the problem is, but I can't seem to find it.
Probably because the body background is set to be white? It looks as expected.
body {
background: #fff;
color: #333;
text-align: center;
line-height: 1.4;
margin: 0;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
}
(2015-03-23, 03:18 AM)Omar G. Wrote: [ -> ]Probably because the body background is set to be white? It looks as expected.
body {
background: #fff;
color: #333;
text-align: center;
line-height: 1.4;
margin: 0;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
}
You have to view it with a phone or use chromes phone (device) simulator found using "inspect element" (ctrl+shift+I) -> 'toggle device mode' to see what I mean..
#footer .upper {} has a set background image set to repeat horizontally (x) but the <ul> list inside it is breaking a new line. One solution and probably the best approach could be to replace the usage of image with CSS3 gradients were possible. In this case I think it is possible.
Though I'm unsure if that is the point of responsiveness design. It should probably hide the unnecessary links (which I think the CSS attemped to but failed because white-space: nowrap; is missing in #footer .upper {}).
Quite the powerful tools those are BTW. First time using them.
(2015-03-23, 05:58 AM)Omar G. Wrote: [ -> ]#footer .upper {} has a set background image set to repeat horizontally (x) but the <ul> list inside it is breaking a new line. One solution and probably the best approach could be to replace the usage of image with CSS3 gradients were possible. In this case I think it is possible.
Though I'm unsure if that is the point of responsiveness design. It should probably hide the unnecessary links (which I think the CSS attemped to but failed because white-space: nowrap; is missing in #footer .upper {}).
Quite the powerful tools those are BTW. First time using them.
I tried removing the background images in the footer and adding '
white-space: nowrap;'; did nothing.. =/
It did work for me. You are probably editing the wrong tags?
(2015-03-23, 01:49 PM)Omar G. Wrote: [ -> ]It did work for me. You are probably editing the wrong tags?
I'm sure it worked for you, but I couldn't make it work. Are you sure we are talking about the same thing? I'm pretty much a noob; I just know the basics of web.
What exactly should I change to make it work? Thanks for taking the time
