After much searching, I am confident that using "Skeleton CSS" will help achieve my goal.
The concept is simple, but implementation is proving to be difficult. I am trying to create a table with multiple images that will change width to 750px when displayed on a smaller screen.
You can view the images I am working with here:
Currently, the images are staying fixed in size. This is because I simply sliced them from a PSD file and saved them for the web.
Although I am okay with the images scaling down in size for tablet (754px) and desktop (960px) displays, I really just need them to transition from one width to the other.
Here is a snippet of the current HTML code:
<table id="Table_01" width="960" height="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/home_maingrid_01.png" width="310" height="160" alt=""></td>
<td rowspan="5">
<img src="images/home_maingrid_02.png" width="15" height="500" alt=""></td>
<td rowspan="3">
My main goal is not to get a complete solution, but rather to receive guidance in the right direction to avoid wasting time.
This is for a Magento homepage where different features will be displayed. I have a separate store view for mobile, which is why I am focusing on widths of 960px and 754px.