Responsive Photos and Text in Cornerstone

I am using Cornerstone to make a simple contact page. When viewing my contact page on an Iphone X, the photo did not seem to resize for the phone and a headline is cut off. I must be missing something. Any solution for this?

Hey Justin,

The image background size is cover by default. That means that the image will “cover” the section or element where it’s applied.

How do you want your image to display on mobile? We need the answer to that so we could provide a proper solution. But, to give you an example, setting the background size to contain would result to this:

I believe you wouldn’t want that either. It is important to remember that the Background Image, in general, is only used for decoration. If you need all parts of your image to show up and easily control where to display the image, you need to use an Image element instead and show your image beside your text.

Let us know your design plans though as there might be an exception.

-----------------------------------------------------------------------------------

Regarding the text, you will need to make it smaller on mobile and you’ll need to use the Responsive Text feature. Watch the video below to see the feature in action.

Another method to make text responsive is to set a fluid text size. Watch the setup in the video below.

You can learn more from our Youtube Channel and our Knowledge Base.

Hope that helps.

Thanks. The Photo is really not critical to show in it’s entirety. I am more concerned with the text. Thank you for your help! I will have to check out your Youtube for sure.

You’re welcome!
We’re glad @Christian were able to help you out.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.