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

[Sapphire]

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

[Sapphire]

This is the code I used:

Nav option1 Nav Option2

[TheDoc]

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?

[Alen]

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)

[Sapphire]

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!

[Hectorsito20]

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**

[Author]

Posts