Image with text horizontally

You can display an image on a side and some text on the other side, with the background color of your choice and an optionnal shadow inside the image. It's easy and there's 148 colors available for the background and the shadow.

The result is responsive. I recommend you to resize the window of your browser to look the different results.

You have 3 possibilities :

• You want use all the width of your browser (if Wide layout) or all the width of your website (if Boxed layout). To obtain that, you must create a new module with the type Custom HTML. Choose the module position "image-text-top" or "image-text-bottom" and paste the HTML code inside.
• You want use only the width of your website and display image and text inside a special area above or under your article. To obtain that, you must create a new module with the type Custom HTML. Choose the module position "top" or "bottom" and paste the HTML code inside.
• You want display the image and the text in an article. To obtain that, edit your article and paste the HTML code inside.

Important : for these 3 possibilities, the HTML code is the same but the result is different.

In a module, the width of each part is 50% and there is a border above and under the title H2 (only for "image-text-top" and "image-text-bottom"). Under 980 pixels, the text is under the image and the border disappear. The min height is the same in an article (read below). In Template manager, you can adjust the font for this part.

If you display the code in an article, this is the result :

• Under 980 pixels, the image and the text are inline.
• Between 980 and 1100 pixels, image and text are on a side. And the width of each of them is 50% with a min heigth = 50% of the viewport.
• Between 1100 and 1300 pixels. Same thing with a width = 58% for the image and a min-height = 450pixels
• Above 1300 pixels. Same thing with a width = 66.66% for the image and a min-height = 400pixels

Procedure

Edit your module or your article and disable the wysiwyg editor. Then, paste the HTML code and change the text and the path of your image.

Important : In each example, I write the name of each image (mountain or bridge). This text is important because if there's nothing, the wysiwyg editor can't save this part. Of course, you can replace this text by the word of your choice.

Note : you can paste several times the code if you want display several images.

Note 2 : Shadow around the images : you can add an internal shadow with the code "shadow-image-COLOR" (replace color by the your choice). See examples below.