Image behaviour in responsive site 
Author: Malcolm P.(1) With the 'native' browser on my Samsung S3 (simply designated 'Internet'), images placed with the Image Object display incorrectly in the 480px smartphone viewport, that is they are stretched vertically and compressed horizontally to fit the portrait aspect ratio rather than being correctly scaled. They display correctly when the phone is rotated to the landscape position.
'In-line' images inserted directly into the Text Object scale and display correctly in both cases, as do all images when the Chrome browser on the phone is used instead of the native browser.
(2) Can you please advise the optimum procedure for using images in responsive sites, so that the text consistently wraps correctly around the image.
With an Image Object in the same row as a Text Object, the text extends vertically as the browser width/viewport is reduced, increasing the white space below the image so that it no longer wraps visually. The integrity of the page can only be maintained by inserting a line break before the Image Object, pushing it to the next row, but then it expands to fit the cell width rather than retaining its original size.
Alternatively, with images inserted directly into a Text Object, the text initially reflows correctly as the browser window is reduced, but as it reaches certain points the text flow is compromised; so that, for example, there may be only a single word adjacent to the top of the image, followed by a large white space for the height of the image before the remainder of the text then continues below. There are particular image widths that appear to mitigate this behaviour, so that the text width reaches a certain level then jumps in its entirety to below the image, but I am not sure what controls this, and it also heavily constrains the image size(s) that may be used.
Neither behaviour is optimal; please can you advise the correct approach for best results.
Many thanks.
Hello Malcolm,
The issue you experience could depend on the internal browser which has not been updated or contains bugs still not solved.
Could you please write me the link to the page you have the issue so I test it with different mobile browsers?
Check also if there is an update for the stock browser since this probably could solve the experienced issue?
Many thanks!
Author
Hello Claudio,
Firstly, I have now set this post as private, as the link below to the site is a 'shared URL' until the DNS records for the domain are updated and which I don't particularly want to go public. Please could you confirm that this post will remain hidden if I subsequently reset the thread to Public for the benefit of others, or should it now remain as private?
The site is currently live and accessible via http://********** The two pages in question are Fine Art Prints and Technical Info. The image sizes on these pages have been 'tweaked' to preserve the page formatting as best as possible so do not now fully show the extreme behaviour noted below, but please see the further detailed notes for each page. The formatting issues occur with both Chrome and IE11 browsers, so appear to be specific to the site rather than the browser.
(1) The described issue with the image stretching in the Samsun Galaxy S3 in portrait orientation only seems to occur in this mode and with the default (Android?) browser, so may be a bug in that browser. It also only occurs with Image Objects*, rather than images inserted directly into a Text Object. Chrome on the S3 appears to display all the images satisfactorily.
*The two images on the Artists/Jean Miller page are Image Objects and stretch/distort in the same fashion as the image on the Fine Art Prints page.
(2) The image on the Fine Art Prints page is set as an image object in a column to the right of the accompanying text. It currently has a line break set, so that as the browser window width is reduced to the next viewport, it jumps to the next line. The disadvantage(?) of this approach is that the image then enlarges in size to fit the line width and the sudden jump in size looks unnatural?
If the line break is not set, what happens as the width is reduced is that the block of text in the text object to the left of the image reflows to extend that cell downwards, forcing the paragraphs below and in the next row further down the page and leaving a large white space below the image.
Similarly, the size of the image object has to be carefully selected to preserve the appearance of correctly wrapping text in the full-size window and to avoid excessive white space beneath either the adjacent text or the image, but this severely limits the available size(s).
Ideally I would like the text to reflow around the same-sized image as the page width reduces, but maybe there is no way to achieve this?
(3) The image on the Technical Info page is inserted directly into the text object as an alternative approach. The behaviour is acceptable with the page as it currently stands, with the text to the right initially reflowing and then jumping entirely to sit below the image, but to achieve this the image size had to be very accurately fine-tuned and is larger than I would have preferred. At smaller image sizes, the text initially reflows as expected, but then will partially 'jump' to fall either lower down or fully below the image, leaving 'orphan' text at the top. So, for example, with a smaller image, the first word 'Unless' in the paragraph is left on its own at the top right of the image as the page width reduces, with 'otherwise requested ...' etc falling either at the bottom right of the image or entirely below it, splitting the paragraph and leaving a large white space between the two parts.
Maybe I'm expecting too much and the desired behaviour with the text reflowing around the image simply isn't possible with a standard web page, or not without custom code? Both pages are fine in non-responsive mode.
I hope that's a sufficiently detailed description along with the site link to explain the issues, and would be very grateful for any advice or suggestions that might assist in achieving a clean, professional appearance to the page.
Very many thanks,
Malcolm
Hello Malcolm,
To keep the url hidden it needs to remain private. If you want to set it public I can remove the URL so it won't be visible.
I tested the website with different stock browsers and I didn't experience the same issue. I think it's only related to the samsung stock browser.
Generally these are not updated often by the manufacturer but if you notice the presente of an update for it proceed to install it.
About (2) this is normal since then the image will use all available space and it can appear bigger. Also if you don't set the line break as soon as the smartphone view has beenreached it will display them one under the other.
unfortunately the effect you want to reach with the text around the image will be difficult to achieve. Also if you add it in the text object and you wrap the text around, with the last viewport it will be separated.
to have such a control over the images and how they have to behave when in the smartphone view it will be necessary to use custom HTML code. The program generates pages to have the best results but obviously sometimes it's not exactly what you are looking for since it has been made generally to adapt but some cases needs tweaks for a different apprearance.
Unfortunately for the custom HMTL code I can't help you since we provide only support for the functions inside the program.
What you can do at is to write an IDEA post to suggest it so the developers will add the functionality to achieve this in the future releases of the program.
It is now set to work in this way to give to be seen correctly on the most used mobile browsers and there's no option to keep the wrapping function in the last breakpoint.
Many thanks!
Author
Hello Claudio,
Many thanks for your detailed and helpful reply.
Re. the text wrap in general, I had suspected I might be asking too much of a standard webpage, without custom code, but unfortunately I'm still a novice in this area so wasn't sure.
(1) Providing the Samsung stock browser is an individual case, I'm not worried about the issue with that as long as other mobile browsers work correctly, which you appear to have confirmed.
(2) If that's the way it has to work, then I'm OK with that. I'm not concerned about objects appearing above each other in smaller viewports if that's the only way of doing it, I just wanted to make sure I hadn't overlooked a more correct way of formatting the page that would have given me (closer to) what I wanted.
At this stage, I don't think I want to go down the custom code route. I don't expect you to support that, and I don't currently have the experience to do it myself.
(3) My concern with the image inserted in the text block was to avoid the orphan text problem, where the wrap changes to leave a single word at the beginning followed by a large white space before the remaining text continues. As noted, this seems to require very careful sizing of the image to avoid, thereby substantially reducing the layout flexibility. That particular problem does look very ugly, and it is still not clear why some image widths allow the text to reflow nicely while others leave orphans. The image and text separation in the last viewport with this approach is not a problem.
I'll take you up on the IDEA post, thanks.
I'm happy to reset this post as public in case it helps anyone else, but would be obliged if you could remove the URL first, please.
I'm much obliged for all your help.
Malcolm
Hello Malcolm,
I removed the URL from the post as you can see. Could you please reply me on the issue reported on https://helpcenter.websitex5.com/post/134196 ?
Many thanks!