Container needed to work on phone

[KennyReff]

Hello. I’ve got a page with a text element (inside a column inside a row) that looks fine on the desktop, but awful on the iPhone. See attached. What adjustments do I make to have the text not be so narrow on the phone? Thanks.

PHONE:

DESKTOP:

[prakash_s]

Hello @KennyReff,

Thanks for writing to us.

It is not possible to guide you with only a screenshot, in order to help you with your concerns we need to check the exact page URL so that we can check and guide you properly. I tried to access your site but it seems that you have set up maintenance mode at the moment I would suggest you disable the maintenance mode or please share the admin login details in the secure note so that we can check it on our end.
Please provide the following details

• WordPress Login URL
• Admin-level username and password
• Exact page URL

You can find the Secure Note button at the bottom of your posts

Thanks

[KennyReff]

Hi Prakash. Thanks for the guidance. Secure note attached to log in. I also have a second question. How can I adjust the space between paragraphs in a text element? It’s too large at the moment. Thank you.

[christian]

Hey Kenny,

You’re experiencing this layout issue because you used padding. Padding should not be used to limit the width of the content.

Please instead inspect your Row element, deactivate the Global Container checkbox then set the Max Width in PX. That would limit your content’s width on desktop but no on mobile. You can use a bit of a padding in the Row element so content won’t stick to the sides on mobile.

Thanks.

[KennyReff]

Perfect! Thank you. So glad you informed me of this before I built too much!

I had another question in the original post. How can I adjust the space between paragraphs in a text element? It’s too large at the moment. Thanks.

[prakash_s]

Hello Kenny,

It is the default margin-bottom of the paragraph in case you want to decrease the margin, you need to override the style through the custom CSS code. I would suggest you go to the Text element —>Customize —>Element CSS—>Add this custom CSS code.

$el.x-text p{
  margin-bottom:1em;
}

Please feel free to change the margin value as per your design. The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[KennyReff]

Perfect. That’s what I needed. Thank you very much. One last question (do I keep saying that?)…

On this same page, the large photo at the top gets cropped too much on the desktop, and WAY too much on mobile. How can I control that?

And if I want the photo to instead be behind the other elements so that they obscure the photo as the user scrolls, how do I do that? Thank you.

[ruenel]

Hello @KennyReff,

The background image is just 1200x369 pixels. You may need to upload larger image dimension.

• See the image link in the secure note.

And then you will have to change the height of your Column element on mobile. It must be lower than 400 pixels;

Best Regards.

[KennyReff]

Thank you. As you suggested, I enlarged the image and trimmed the height of the column. This helped on the desktop, but on mobile, I’m still seeing just a small portion of the image. Can you offer more advice on the settings for an image element? I’m still in blind about how the image, row and column elements all interact.

Is there a document that explains what each attribute does in these elements and offers real-world implications of changing them? Thanks again.

[ruenel]

Hello Kenny,

You have added negative Top and Bottom margins to the Section and your Row element. You will have to remove or set it to 0 instead.

For more details on how you can work with the background images, please check this out:

Best Regards.