Images are not displaying correctly on mobile, and text editing isn't working

[jhayles]

Hi. I’m struggling to figure out why my images (I uploaded a high quality from Adobe) are displaying in different sizes on mobile. It’s mainly my top image…for some reason, it’s only showing a narrow strip of it instead of the bigger size.

Also, when I click on a text box to edit the template’s text it is automatically making my text smaller and I can’t seem to get it back to the original size. I want the size of the text and icon to remain the same but they are being made smaller when I edit the text.

Please help. I’m honestly frustrated with the building process. I’m not finding it user-friendly or intuitive at all.

www.experiencethesprings.com

[christian]

Hey @jhayles,

I’m sorry to hear you’re frustrated. Would you mind taking a screenshot of the actual image having the problem you described?

Regarding the text, I also couldn’t replicate what you have described. Please tell us the exact steps you did so we know where in the step the text gets smaller.

Once we know how to replicate the issue, we could surely help.

Thanks.

[jhayles]

Here are some screenshots:

1. Mobile screenshot shows how the image becomes just a small, thin rectangular strip, instead of the bigger size it was uploaded as. Desktop doesn’t change the size of it like that, only the mobile version.

2. The other screenshots should be viewed in order: 1,2,then 3. It shows the process I went through to get to the smaller text. Step one was to click on the text box. Step two was to double-click so I can change the words. Step three, change the words. After you click away the text shrinks to a small size.

Thanks for your help.

untitled folder

[ruenel]

Hello @jhayles,

Thank you for the clarifications.

1.) Your row has a maximum of 650 pixels only. When inserting an image, it will display 100% width the same as the maximum width of its container which is also 650 pixels. Even if you have uploaded a 2000x820 image, it can only be displayed at a maximum of 650 pixels because of the width restriction of the row container. If you want to display a bigger image, you must adjust the maximum width in your row container.

2.) To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[jhayles]

1. I adjusted the settings to a max width of 1500, but I want it to display more of the height, not the width. Where is the height setting for the picture?

2. 
   
   I don’t have a secure note option to choose…

[ruenel]

Hello @jhayles,

1.) Now, I see what you really want to do here on smaller screens. The image with the lake and mountain is added as a background image. Be advised that the background image will display itself to cover the whole section. At the moment, the width and height of the background image rely on the width and height of the section. The section is using a 25% top and bottom margin. The smaller the screen it gets, the height gets less and less. If you want to control the height, please add a Gap element into your column so that you will have a base height or at least a minimum height to display on smaller screens.

2.) Regretfully we cannot check your site yet because the given information does not work for us. Please check the given user credentials.

Thanks.

[jhayles]

Okay. I will play with those settings. I updated the secure note. I had the username wrong.

[ruenel]

Hello @jhayles,

I have logged in and checked your homepage. Yes, I can replicate the issue. It is because the responsive text was applied to the headline. As you change the text, the page reloads while the responsive text script is not reloaded. The text font size will differ whenever you insert other text contents depending on its word length. If you do not want to have this reaction or behavior, please remove the responsive text by removing the custom class name in the “Customize” tab of the headline element.

Hope this helps.

[jhayles]

I don’t understand…this was an X-Theme template I used. The creator had to have a reason for adding the responsive text. What happens if I remove it? Would that mean the text will not automatically adjust according to screen size?

[ruenel]

Hello @jhayles,

Yes, there is a reason for the responsive text. If you remove it, you will have to set a fixed font size in the Text > Text > Text Format option in the text element settings.

Now, if you still want to have responsive text, you will have to ignore the behaviour because it is only temporary and happens only before you save the page. Check out the illustration below:

1.) Double-clicking the text element

2.) After inserting or changing the text content, you will have this:

3.) As soon as you save the page, you will see that the responsive text is applied again:

Hope this makes sense.

[jhayles]

Got it. Thank you. Can you point me in the right direction where I can learn how to properly handle images inside the X builder? It seems that things get complicated when trying to do photos.

[tristup]

Hi @jhayles,

Glad that we are able to help you. On the image issue, I would like to suggest you to use the image element to show the images. Please get more information on image element here in this article: https://theme.co/docs/image
There are a few more options available to show the images or galleries, I would suggest you go through the documentation to get more information on our available elements and extensions: https://theme.co/docs

Hope it helps.
Thanks