0

I'm having an issue with the page width on mobile browsers. If you visit the page http://liquidlizard.net/jobs/post on a PC browser then the layout is as expected, however if you visit on an android browser for example, then on the right hand side there's a gap.

It all should add up to 1024px wide so I don't understand why it doesn't do so on the mobile browser.

I'm out of ideas. Anyone got any spare?

Zaphod Beeblebrox
  • 552
  • 4
  • 12
  • 36
  • your page is not responsive, so the issue is there, make it as responsive. – Sree Mar 27 '14 at 06:41
  • I just want to fix what is there at the moment. I don't want to have to have rebuild the whole thing. thanks tho – Zaphod Beeblebrox Mar 27 '14 at 06:44
  • this may help you http://stackoverflow.com/a/9917980 – Sree Mar 27 '14 at 06:46
  • 1
    @ZaphodBeeblebrox You can fix the issue with css media query without any need to rebuild – winnyboy5 Mar 27 '14 at 06:46
  • from what I read if I have media queries then I'll have some more css specific to the screen size. Looks like I'd have to do this for lots of different areas of my site. Surely in this day and age a 'smart' phone can render a webpage like a real computer!?!? – Zaphod Beeblebrox Mar 27 '14 at 06:51

3 Answers3

0

Hope this helps you..........

http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

Example:

@media (max-width: 360px) {
 css code for your mobile layout(360px device)
}
@media (max-width: 320px) {
 css code for your mobile layout(320px device)
}

This should do............

winnyboy5
  • 1,486
  • 3
  • 22
  • 45
  • thanks but I really don't want to have to build another version of this layout. I just want to fix what I have there. Surely must be possible?!? – Zaphod Beeblebrox Mar 27 '14 at 06:46
  • @ZaphodBeeblebrox sure its possible. just write a css within media (max-width: 360px) {css code to correct the layout for mobile}. No need to rebuild. i will give a sample – winnyboy5 Mar 27 '14 at 06:49
  • yeah but I'm going to need new rules for every page then. Surely there must be some way to fix this easily? – Zaphod Beeblebrox Mar 27 '14 at 06:53
  • @ZaphodBeeblebrox it won't be necessary if you have a common style sheet. Applying the style will take effect globally. No need to apply to each and every page – winnyboy5 Mar 27 '14 at 06:55
  • yeah but for instance what css codes would I put in there? for example on the homepage then, I'd have to make it narrower obviously but then all the graphics on that page need to shrink so they not? I'm sure on other pages making one rule in the media query would have knockon effects – Zaphod Beeblebrox Mar 27 '14 at 06:59
  • @ZaphodBeeblebrox these rules only apply for the mobile devices. Your are using tables it seems. change the pixel widths into percentages to make the layout out fluid. example: 300px to 30% or something – winnyboy5 Mar 27 '14 at 07:07
0

Add to head and see it helps:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
Beardminator
  • 784
  • 8
  • 20
0

Try this: 

.widthContainer {
    margin: auto;
    max-width: 1024px;
    text-align: center;
}
.utilNav {
    width: 40%; <--remove this line
}
Vladislav Stanic
  • 795
  • 8
  • 13