The current text is too wide. I want to customize the width of the text so that each line of text is displayed less to increase the length. Figure 1 is my website, and Figure 2 is what I want.
Hi @OneChefOn
Please share me your store url to let me suggest code to update it
Hey! [email removed]OneChefOn
To adjust the width of your text and make it narrower, you can set a max-width on the container. This limits how wide the text area goes, making each line shorter and increasing the vertical length. You can add something like this in your theme’s CSS:
css
Copy
Edit
max-width: 600px
margin: 0 auto;
This should help create that look you’re going for! Let me know if you need more details or to help resolve it.
Let try to add this css code to your custom file:
@media screen and (min-width: 1280px) {
.shopify-section.image-with-text-section .container {
max-width: 1000px;
}
}
I tried your method, but it doesn’t work. Also, I want to edit the theme code so that I can edit all this sections at once. Can you help me solve this problem? I would be very grateful.
Yes!
Yes what’s my code suggestion above do. try to add it to end of file assets/theme.min.css
Ohh now i understand
Which page url are your checking for section?
I try on https://ichefpower.com/pages/about-us then check the css file don’t have that class you added: https://ichefpower.com/cdn/shop/t/11/assets/theme.min.css
oh I see you just change to container to fullwidth so please try to add this one to theme.css.min:
.shopify-section.image-with-text-section .fullwidth-container {
max-width: 1000px;
margin-inline: auto;
}
Sorry, I mis-expressed it. Let me reiterate that what I want is that for section “Image with text”, regardless of whether it is full screen width, the text display width is shortened, so that when I configure a long text, the number of lines is increased due to the shorter width, and it will have the same height as the picture, which is more visually harmonious. I don’t know if I have expressed my meaning clearly.
You mean flexible width for “Image with text” to make text always have same height with image, right?
I scare that we can’t do, we only fixed a max-width at a screen to allow your content will be same width (as code I suggest above)
More precisely, set flexible width only for text, not images. Is it possible?
actually no because we don’t know how many text you add for each
What about setting a fixed width for the text alone? Is that possible?
