12 {{ upvoteCount | shortNum }}
12 {{ upvoteCount | shortNum }}

Website Scaling Question

by MrMysteryBox
11 replies
  • WEB DESIGN
    • |
What is the best way to take a "basic" HTML website like: FloorGem.com and make it iPad and iPhone friendly? As you can see in the attached ipad picture, the Contact Form (on the right side) overlaps other content. If you go to the actual website on a normal computer it scales fine. What is the best way to fix this so it looks good on iPads/iPhones as well? Thanks fellow Warriors!



#question #scaling #website
  • Profile picture of the author Michael71
    Responsive web design - Wikipedia, the free encyclopedia

    I would, personally, redo the whole site.
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[7857148].message }}
  • Profile picture of the author Michael71
    Ever heard of media queries?

    Your site uses fixed width containers, tables and stuff... Does not make sense to touch your code.

    Besides that I would personally never do sites that have more then 980px width.

    Good luck.
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[7857231].message }}
    • Profile picture of the author MrMysteryBox
      Originally Posted by Michael71 View Post

      Ever heard of media queries?

      Your site uses fixed width containers, tables and stuff... Does not make sense to touch your code.

      Besides that I would personally never do sites that have more then 980px width.

      Good luck.
      Thanks for the info but... what would i literally need to do to fix it? is it easy? I know what should have been done in the beginning but we are past that I didnt create the original website
      {{ DiscussionBoard.errors[7857285].message }}
  • Profile picture of the author Michael71
    Do you expect me to show you how and what to fix? No, it's not that easy...

    To make your site "iPad and iPhone friendly" everything has to be changed, layout in general, the navigation, the 6 columns, everything...

    As I said, better "recode" it... with a proper framework like ZURB Foundation or Twitter Bootstrap
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[7857363].message }}
  • Profile picture of the author Aljiro
    There are a few things that can be done to make certain elements look better on smaller devices but nothing really "Responsive" without redoing the entire website.

    You can fix the css on the contact form to make sure it shows above the rest of the content but it's not exactly simple or easy.
    Signature
    {{ DiscussionBoard.errors[7857694].message }}
  • Profile picture of the author TopKat22
    Hire someone with lots of high ranking reviews on fiverr.com to make you a mobile version of your site for $5
    Signature
    44 days in and we broke the $10K a month recurring bench mark.

    Guaranteed 60% Opt In Rate Traffic-Real People-Fresh Today-High Quality Biz Opp traffic![/URL]
    {{ DiscussionBoard.errors[7857697].message }}
  • Profile picture of the author Michael71
    LOL @ Fiverr...
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[7858487].message }}
    • Profile picture of the author Greg71
      The contact form could be put in a div and given a z-index thing so it sits on top rather than underneath. Give it a fixed position so it stays in one place. That would do for ipads but for iphones etc you need a seperate mobile site.
      {{ DiscussionBoard.errors[7859262].message }}
  • Profile picture of the author Andrew H
    Most of the people posting here are giving you opinions (such as you need a responsive or mobile site). And the last post by Greg71 is pretty horrible solution, kinda like ductape on a hole in your boat.

    You can fix the problem by tinkering with your CSS. You need to decrease the main .pageContainer div to 960px (1020px if you don't want to change the internal div widths) and then float your main content left and your sidebar right setting the appropriate widths for those divs. Your site won't look the best on mobile website (they will need to zoom), however it won't look broken like it currently is.

    I have not explained everything you need to do, but anyone with a basic understanding of CSS and HTML could solve your problem fairly quickly.
    Signature
    "You shouldn't come here and set yourself up as the resident wizard of oz."
    {{ DiscussionBoard.errors[7860708].message }}
    • Profile picture of the author MrMysteryBox
      Originally Posted by Andrew H View Post

      Most of the people posting here are giving you opinions (such as you need a responsive or mobile site). And the last post by Greg71 is pretty horrible solution, kinda like ductape on a hole in your boat.

      You can fix the problem by tinkering with your CSS. You need to decrease the main .pageContainer div to 960px (1020px if you don't want to change the internal div widths) and then float your main content left and your sidebar right setting the appropriate widths for those divs. Your site won't look the best on mobile website (they will need to zoom), however it won't look broken like it currently is.

      I have not explained everything you need to do, but anyone with a basic understanding of CSS and HTML could solve your problem fairly quickly.
      Thanks Man!
      {{ DiscussionBoard.errors[7860865].message }}

Trending Topics