Archived and Closed
This conversation is no longer open for comments or replies and is no longer visible to community members. The community moderator provided the following reason for archiving: resolved
I placed the following code in template for an editable header image:
[% image name="IMAGE_NAME" url="URL_VALUE" width="600" %][%/ image %]This is the exact code the template editor generates via the template tag selector, with one modification from 650 to 600.
Per the CSS descriptions earlier on the page I added the following code for class "editable_image" to the previous table that this image selector is located:
<td align="left" valign="top" style="background-color:#ffffff;" class="editable_image">[% image name="IMAGE_NAME" url="URL_VALUE" width="600" %][%/ image %]</td>
I have tried several different options, with <span> tags and <div> tags also adding class to the JSON code, but the end result is the responsive code never takes effect and the image is not responsive on mobile devices. The image stays at 600px and causes the user to either see very small text, or scroll side to side.
If you don't select this header image in my template and included images and text, everything else works perfectly and scale to mobile device, so I have isolated this issue to this specific block of code.
If anyone has some sample code where they have added a image selector outside the main flexible layout area and were able to get the images to scale for the mobile media quere I would love to see your code. Thanks.