0

I have 3 images within a table, which is the only way I could figure out how to get them adjacent to each other. The problem I am having is that while on the screen I am using, they look like how I want them to be without a scroll bar at the bottom, but on other size screens they force the whole page to extend and therefor requiring scrolling to see the whole width of the page. How can I make the appearance responsive so that the images remain the same size relative to everything else?

Screenshot attached

enter image description here

Adeel
  • 2,901
  • 7
  • 24
  • 34
Cameron Hickey
  • 1
  • 1

1 Answers1

0

There are a couple of good ways to make webpages like this responsive to screen size. I'll describe two of them, but again, there are many more:

  1. Making the table width match the page width
  2. An external style library, like Bootstrap

Making the Table Width Match the Page Width

First, you need to make sure that the page itself has the style position: relative on it - so that any of its children (including your table) can be positioned or sized relative to it. There are a couple ways to do this with css, but if you're using classes, you can just assign all of the standard high-level elements in html to be positioned relatively, and to be the full-width provided by the browser.

html, body {
   position: relative;
   width: 100%;
   min-width: 100%;  //we do both width and min-width for compatability with old browsers
}

Now that that's out of the way, you have a starting point for your dynamic width. If the table is a direct child of the <body> element, then you should define a class for it that will also give it a width of 100%. Remember, this width maps to the width of it's parent, so since the <body> is the full page width, then the table will attempt to be too! If you want to add some space around it (so that it doesn't literally hit the page edges, you can add some padding too!

.fullWidthTable { 
   position: relative;
   width: 100%;
   min-width: 100%;
   padding-left: 20px;
   padding-right: 20px;
}

Now you can put that class on your table element, and it should map to the page size! Keep in mind that if your images don't re-size according to the size of their <td> parents, then they might overlap or have some other undesired behavior.

Using Bootstrap

So if you're interested in using existing frameworks for organizing your html elements on the webpage, I would strongly recommend Bootstrap. Bootstrap provides you a number of pre-defined classes that have a consistent and predictable structure which you can use to make dynamic websites. In general, bootstrap structure involves three main classes:

  • containers
  • rows
  • columns

It's actually quite similar to working with an html table - but it takes dynamic sizing into account by design.

You can find full documentation and examples for using Bootstrap here: Bootstrap Docs

Zachary Fejes
  • 58
  • 10