Responsive Template multiple columns resizing question

[soper79]

I have a seemingly pretty basic question/issue that's eluding me and I was hoping someone could help.

This is from the Cerberus responsive template.

When, lets say for example, the 3 column wide picture section goes to mobile, the images stay the same size which is small at 170x170 on mobile in this example. I would like those images on mobile to take up the same width as the normal 600px wide or full width columns if possible. Does anyone have a solution for me? If I change the width of the images to 600, that would work on mobile when it stacks single column but obviously on the desktop version it then goes well beyond the 600 wide layout.

Sample code from responsive template:

  <!-- 3 Even Columns : BEGIN -->
        <tr>
            <td valign="top" style="padding: 10px; background-color: #ffffff;">
                <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                    <tr>
                        <!-- Column : BEGIN -->
                        <td width="33.33%" class="stack-column-center">
                            <table role="presentation" cellspacing="0" cellpadding="0" border="0">
                                <tr>
                                    <td style="padding: 10px; text-align: center">
                                        <img src="https://via.placeholder.com/600" width="170" height="170" alt="alt_text" border="0" class="fluid" style="height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <!-- Column : END -->
                        <!-- Column : BEGIN -->
                        <td width="33.33%" class="stack-column-center">
                            <table role="presentation" cellspacing="0" cellpadding="0" border="0">
                                <tr>
                                    <td style="padding: 10px; text-align: center">
                                        <img src="https://via.placeholder.com/600" width="170" height="170" alt="alt_text" border="0" class="fluid" style="height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <!-- Column : END -->
                        <!-- Column : BEGIN -->
                        <td width="33.33%" class="stack-column-center">
                            <table role="presentation" cellspacing="0" cellpadding="0" border="0">
                                <tr>
                                    <td style="padding: 10px; text-align: center">
                                        <img src="https://via.placeholder.com/600" width="170" height="170" alt="alt_text" border="0" class="fluid" style="height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <!-- Column : END -->
                    </tr>
                </table>
            </td>
        </tr>
        <!-- 3 Even Columns : END -->

[Ted Goas]

Hi, as you've discovered, the images in this example have a fixed size since 170px can fit on the smallest screens and doesn't need to scale down. But they don't scale up either, but we can change that by removing the image's height and adding a class to the image that we can use to scale the image with a media query:

<style>
@media screen and (max-width: 600px) {
  .full-width-on-mobile {
    width: 100% !important;
  }
}
</style>
...
<img src="https://via.placeholder.com/600" width="170" height="" alt="alt_text" border="0" class="fluid" style="background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;" class="full-width-on-mobile">

In this example, the image will display at 170px wide on larger viewports. But as soon as the viewport drops below 600px, the media query resizes the image to take up 100% of the available width.

Does this answer your question?

[soper79]

Hmm. Perhaps I applied it wrong but in my litmus, I'm still showing on single column the images are staying at that 170 width vs the full screen. That's with the style added in there and the IMG code replaced.

Here attached is my full code if it helps.

Cerberus_Responsive_With_Edits_Full_Width_On_Mobile_3_Wide.txt

[Ted Goas]

@soper79 I see two things going on here.

1. You have class defined twice in the same image. These should be combined to class="fluid full-width-on-mobile">
   

but in looking at your code...

2. If you add a width: 100% to each image, that should achieve the effect you're going for without even needing the extra class or media query:

<img src="https://via.placeholder.com/600" width="170" height="" alt="alt_text" border="0" class="fluid" style="background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555; width: 100%;">

The image will always want to be 100% wide and will be constrained by its container. On desktop, the container is 1/3 wide and on mobile it's 100%.

Make sense?

[soper79]

Absolutely. I tested both methods. Both worked. But to your main point about simply adding width: 100% seems the cleanest. Thank you so very much. This template is nothing short of fantastic and I'm a big fan. organized & easy to work with and gives one just about every layout they could possibly want so thank you for your hard work. It's much appreciated. Thank you again.

[Ted Goas]

@soper79 glad everything's sorted out and thanks for the kind words!