-1

I have observed that at times width of divs gets smaller while viewing in smartphones, which renders very well in a webpage.

For example : [Website_URL] If we see that in FF or Chrome, the width of header / footer / slider background, all takes the full width of available screen size. However, the same gets much smaller while I view that in my Samsung Galaxy note.

Any idea here - I must be missing something on setting width in the smartphone.

Thanks for your time.

PS : The site looks good in FF, Chrome, IE and Safari. I still have width issue with my Samsung smartphone.

Jeremy
  • 975
  • 4
  • 15
  • 26
  • 1
    Not sure what your refering to as the site doesn't respond properly on my iPhone or android devices. Using web inspected you had a bunch of errors including some on the Meta Viewport: see [this link](http://alxgbsn.co.uk/2011/11/23/make-sure-to-use-correct-meta-viewport-syntax/) for help. It may not be the answer but it should help. – Victor Oct 03 '14 at 11:11
  • Thanks Victor, I have changed the Viewport as suggested in the link you have given. This could not solve the problem. In which site you have found the errors please ? – Jeremy Oct 03 '14 at 11:19
  • 1
    The site is not working properly in general. I used [Chrome Web Inspector](https://developer.chrome.com/devtools) to debug the vewiport issue. – Victor Oct 03 '14 at 11:29
  • You probably get negative voting because you are asking questions that show you don't have a lot of knowledge about building websites, and yet you it appears that you do this professionally – James King Oct 03 '14 at 11:39
  • James, "a lot of knowledge" is a very relative word. There are surely things that I know less than someone, but there would be surely things that I would know more than him. This is how life is. And I don't think this is a reason strong enough for giving negative voting. Thanks for your reply nonetheless :) – Jeremy Oct 03 '14 at 11:42
  • Thanks victor, I have removed some of the errors using the w3 validator. This has not solved the issue neither. – Jeremy Oct 03 '14 at 11:46

1 Answers1

0

I solved the problem by adding a min-width to the body element.

After further researching, I found that the problem was related to the width of the largest element of the webpage vis-a-vis the width of the browser. When the browser width was going below the width of the widest elements of the page, those elements where a width was not mentioned, was getting shrinked.

I don't know why this happened, if someone else can give any light on this, it would be warmly welcomed.

Thought to add this in case someone in the future comes across the same problem.

Jeremy
  • 975
  • 4
  • 15
  • 26
  • 1
    When the width of a block element isn't specified, it takes the value `auto`, and keeps the same width as the parent box. The best references are w3 and mozilla (there are links to w3 on the mozilla pages). https://developer.mozilla.org/en/docs/Web/CSS/width – Zantier Oct 03 '14 at 14:22