1 Topic by TFD

  • TFD
  • Senior Member
  • Offline
  • Registered: 2006-02-24
  • Posts: 254

Topic: Style help

I have designed some of my styles to be more mobile friendly, for example the width on one style is set at 800 so it fits my droid pretty well in landscape but the forum is centered on the page (computer or droid) but when I open it on the droid I get only about half the forum showing, the left half is blank space, so each time I refresh I must first grab the forum on the page and slide it left to view the whole thing. What do I need to change to make the whole forum appear on the left side of the page? I guess "justify left" the whole forum is what I'm trying to do.


Thanks!

  • From: Ukraine
  • Registered: 2008-10-31
  • Posts: 762

Re: Style help

.brd {
    margin: 0 auto;
    max-width: 1100px;
    min-width: 700px;
    padding: 1.3em 2em;
    width: 90%;
}

Change width to 100% or remove auto from margin.

  • From: New York (The Best State)
  • Registered: 2010-10-27
  • Posts: 152

Re: Style help

You may also want to check out http://perishablepress.com/press/2009/0 … -makeover/.

If you use a separate stylesheet for mobile devices, you can maintain the same look that your users are used to on your site when it's served to the PC, but have a mobile-friendly version as well that is automatic.

hklown's Website

4 Reply by TFD

  • TFD
  • Senior Member
  • Offline
  • Registered: 2006-02-24
  • Posts: 254

Re: Style help

dimkalinux wrote:
.brd {
    margin: 0 auto;
    max-width: 1100px;
    min-width: 700px;
    padding: 1.3em 2em;
    width: 90%;
}

Removing auto worked great! Thanks!  Now the whole forum is on the left and I have several different widths so depending on how big their phone screen size is they can pic one that fits their screen.

Change width to 100% or remove auto from margin.

5 Reply by TFD

  • TFD
  • Senior Member
  • Offline
  • Registered: 2006-02-24
  • Posts: 254

Re: Style help

hklown wrote:

You may also want to check out http://perishablepress.com/press/2009/0 … -makeover/.

If you use a separate stylesheet for mobile devices, you can maintain the same look that your users are used to on your site when it's served to the PC, but have a mobile-friendly version as well that is automatic.

Great article and info. My problem is I like to switch my style based on if I am inside or outside, I have black background that works well at night and a white background that works well when I am out in the sunlight. Also my droid screen is 800 px wide but the style needs to be 570 to fit my screen perfect when its in landscape orientation. If I set a single mobile page then I am forced to use that one style no matter what right? If it had a popup option to select "day or night" that would work great. As it is I am letting my users pick their style from 8 total:


White backgrounds, black text, easy to read in sunlight
z_mobile_day_480px
z_mobile_day_570px
z_mobile_day_680px
z_mobile_day_800px

Black background, light blue text, nice at night
z_mobile_night_480px
z_mobile_night_570px
z_mobile_night_680px
z_mobile_night_800px