Foreground image issue when viewed on mobile/tablet

Question

I've created some background graphics for a slide show. The text for the first slide consists of transparent PNGs which are floated into position as foreground images.

This looks great when using a fixed width for page, and viewing in desktop mode. But I need my sites to be fully mobile friendly so have selected 100% width. This has thrown up two issues.

1. The words floated into position are now spaced out quite a bit more when viewed on my widescreen monitor. See pic below -


2. When viewing in tablet or mobile mode, the words all float to the top left hand corner, making it unreadable and very messy.


I'm guessing there might not be much that can be done about the spacing of the words for issue number 1. But is there anyway to fix the alignment when viewing on a tablet or mobile? Having all the word images float to one corner is not going to work.

Even when using a fixed width for the page, the images all float to top left in tablet and mobile view.

Hope someone can advise.

Myles

slider-desktop.jpg

slider-mobile.jpg

Answer 1

You can set the positioning of foreground images by dragging and dropping it in each view i.e. Mobile, tablet and Desktop.

Answer 2

Thanks Sarah, that works great!

I appreciate the help. :)

Myles