Issues with image with text length

[Ked]

My text length is too look I want full width for my store but i can’t seem to break the text

https://oriental-perfum.myshopify.com/pages/uber-uns

I am using the impact theme.

[rajweb]

Hey @Ked ,

To make the text full-width on your “Über uns” page, you can adjust the container or section settings in your Impact theme.

Follow these steps:

1. Go to Online Store > Themes >Edit Code.

2. Find the file for the page template, usually located in Section or Templates under page.liquid or a similar file for static pages.

Update the CSS :

1. If the page content is contained within a box, locate the CSS controlling the width. Search for a class like .page-content, .container, or similar.

2. In the CSS file (under Assets, often theme.css or styles.scss.liquid), you can adjust the width or set it to full width.

.page-content {
    max-width: 100% !important;
    width: 100%;
}

This will stretch the text to full width.

Custom Section Settings:

1. In some themes, you might be able to control the width directly from the Theme Customizer (under Customize Theme). Look for options related to page layout or section width.

2. After applying the change, make sure to test it on both desktop and mobile views to ensure it looks as expected.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regard,

Rajat Sharma

[Ked]

I want to set the width of the text. currently its too long so I’ll like to break the line but
doesn’t work

[Made4uo-Ribe]

Hi @Ked

It’s password protected.

[Ked]

sasa

[rajweb]

Wrap your text in a

or

tag like this:

    Your long text goes here.

    It continues here.

Add the following CSS to control the width and ensure line breaks are respected:

.text-break {
    max-width: 600px; /* Set your desired width */
    word-wrap: break-word; /* Break long words */
    white-space: normal; /* Ensure normal wrapping */
}

Alternative Method:

If
is still not rendering properly, try using multiple

tags:

Your long text goes here.

It continues here.

Ensure you are in HTML editing mode when adding these elements. This should help manage the width and break lines effectively!

[Ked]

thanks. let me try that

[Made4uo-Ribe]

Thanks for the info, try this one.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.m-richtext__description.rte.m-content-box__description.h6 {
    width: 90%;
    word-break: break-word;
}

.m-section-template--20476429533451__image_with_text_ApATf9 .m-image-with-text__content {
    padding-right: 0px;
}

section#m-section-template--20476429533451__image_with_text_ApATf9 .m-content-box.m-richtext {
    padding-left: 10px;
}

section#m-section-template--20476429533451__image_with_text_ApATf9 .m-richtext__description.rte {
    width: 95%;
}

• And Save.
• Result:
• 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you.

Your appreciation fuels our motivation to assist you better!

[Ked]

Hello. I need help because the code is messing up the mobile. can we make mobile full width. Just take a look. I need help please