Responsivness of text and image with style width:70%; /30%

Support
#1

Hi there,

I hope you can help me on this one. To describe it in pictures. This is what I want to achieve:
Not only is the text under the image BUT most importantly The image is responsive and the text as well.

Here is what I got on my mobile view: Version 1

And here is my version 2:

Just for information: On desktop it looks good to me :

Please keep in mind I would like to keep the border around and the style of the image and text should be width:70%; /30%
Would be amazing if you can help!!
Best Regards
Maik

#2

Hi There,

Thank you for writing in, regretfully that is not quite easy to position the text below the image on mobile view. That is because on responsive view the stacking order of columns is from left to right (or reverse if RTL layout).

I’d advice that you utilize the Hide Base on Screen Width feature, where you show a different section on different view.

Hope this helps,
Cheers!

#3

Sorry that doesn’t help at all.
The only thing I want to achieve is to get the image and the text like it is in this example
Image and text should be responsive! Please forget about the image above the text.I can figure that later.
More importantly is that I can get the image and the text responsive.
Mobile View

Desktop View

Thank you for looking at this again

#4

Hi,

You can use visibility feature to make it display alternately in mobile.

So if you have

text(1) / image(2)
image(3) / text(4)
text(5) / image(6)

In Mobile

1 & 2 will have no problem to start

For 3-6 you need to have two columns for each number

For #3

a. column with text – set it to be visible in desktop but hidden in mobile
b. column with image – set it to be hidden in desktop but visible in mobile.

same goes with #4 to #6

That way when in mobile you’ll have alternate Image, Text, Image, Text, Image, Text, Image, Text.

For elements in cornerstone, you can use the class field to add visibility classes

Classes:

x-hide-xl – Extra Large | 1200px & Up
x-hide-lg – Large | 980px – 1199px
x-hide-md – Medium | 768px – 979px
x-hide-sm – Small | 481px – 767px
x-hide-xs – Extra Small | 480px & Smaller

So if you want to hide your image element in mobile you can add x-hide-xs class in the class field of your image element.

You can do the same for other elements.

Hope that helps