Center images and wrap text inside grids

[Sean Doherty]

Hello,

I've had a look around the forum and found some possible solutions for what I'm trying to do but I can't quite make it all come together. Essentially, I have a long block of text that I've divided into grids, alongside photos, to make the reading easier, kind of like a blog or story format. I need a way for this to look neat across all screen sizes.

I found this code suggestion for wrapping text, but when I placed the code on "load" there was no change to my app.
Appery("journal_image").css("float", "left");

I found a suggestion for centering image using "More Properties," but that seems to only center the image horizontally, and not vertically. And without wrapping text, I can't get the grid to re-size automatically and it leaves the text condensed in narrow columns on the left side, with the image floating in a lot of white space, but then also re-sizes to wide columns for the text on the right side.

Here is the layout I started with:

Here is the layout in a widescreen view:

Public link is: http://appery.io/app/mobile-frame?src...

[Sean Doherty]

I found the code for wrap text here: https://getsatisfaction.com/apperyio/...

and the "More Properties" suggestion for centering images here:
https://getsatisfaction.com/apperyio/...

[Evgene Karachevtsev]

Hello Sean,
Thank you for the update. Let us know if you need any further help.

[Sean Doherty]

Hi Evgene,

Sorry, maybe I didn't make the above question very clear. I tried a few things by following the above links, but couldn't generate my own working solution. Could you please let me know how I can set wrap text on a Label Component to wrap around an Image Component, and how to make these align nicely across different screen sizes? Thank you!

[Sean Doherty]

Hello, sorry to bother, but is there any update to this? This is the final component of my app that I need to complete before I can launch, and I'll need to launch very soon. Thanks!

[Illya Stepanov]

Hi Sean,

Please check this example: http://jsfiddle.net/kYDgL/

[Sean Doherty]

Hi Illya,

Thanks for the link. I'll see what I can do!

[Nureddin Akpinar]

Hello ilya

I did not reach the conclusion about changing the picture.

in the following code.

What do I need to do.
detailed tape?

var imageNumber = parseInt(localStorage.getItem("imageNumber"));
var image = '';
switch(imageNumber){
case 1:{
image = "LinkToImage1.jpg";
break;
}
case 2:{
image = "LinkToImage2.jpg";
break;
}
case 3:{
image = "LinkToImage3.jpg";
break;
}
case 4:{
image = "LinkToImage4.jpg";
break;
}
}

localStorage.setItem("imageNumber", imageNumber + 1);

[Yurii Orishchuk]

Hi Nureddin.

Please follow these topic. https://getsatisfaction.com/apperyio/...

Also we have to ask you do not duplicate questions in diffrent topics.

Regards.

[Sean Doherty]

Thanks again Illya. I applied to code in the example, customized it as needed, and it is working great now.