Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How Can I Make a Mobile Responsible Table Layout (inline CSS)?

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #43833
    Sapphire
    Member

    Hello!

    I’m a newly graduated Graphic Designer, and I’ve been commissioned to design a mobile app for a startup company. I have created the ideal layout, and have coded it as a table in HTML (all inline), using the proper images and design look and feel they want. This is the basic frame image of the table, so you can see for yourselves:

    The blue lines are Table borders and cells, and the magenta squares marked with X mean images within the cells.

    Now, the table looks fine in my browser, but on a phone, it’s too big and won’t shrink to fit. I was hoping someone could help me find a way to make the whole table responsive to fit mobile screens? I just want it to automatically shrink to fit the screen , without moving cells around.

    I’m still learning and would greatly appreciate the help!

    Thanks!

    Sapphy

    #130304
    Sapphire
    Member

    This is the code I used:

    Logo


    Nav option1

    Nav Option2

    image image 94 scores
    image image image
    image image image

    image

    #130377
    TheDoc
    Member

    Instead of using fixed widths, you should be using percentage widths.

    Having said that, why are you going this route? If you’re just designing the app, why don’t you simply provide the client with a mockup?

    #130380
    Alen
    Participant

    What was the agreement? Are you designing/developing the mobile app? or just designing the look/feel? When you say mobile app do you mean web app (browser) or native app (iOS, Android, etc)?

    You should not be using tables for layout. Here’s a great [intro to CSS layouts](http://learnlayout.com/).

    If you are interested in Responsive Web Design and you want your site to work across different devices you need to learn [CSS Media Queries](http://learn.shayhowe.com/advanced-html-css/responsive-web-design)

    #130560
    Sapphire
    Member

    Thanks for all the advice guys :). I was able to fix it using percentages.

    The reason why it’s in tables is because it’s a bingo game, and it’s easier to lay it out that way.

    I appreciate the help! Thanks again!

    #130568
    Hectorsito20
    Participant

    Thats really nice, im New but i love web design, i love to share with people that believe in this.. Sorry about my english is no Good im Dominican Spanish!, Good Job **Sapphire**

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.