How to Make Paragraph and Image the Same Width in "Stretch Row and Content (No Padding)" Mode?
I am working on my website and using the "Stretch Row and Content (No Padding)" option for my rows. However, I noticed that the image appears slightly wider than the paragraph.
📌 Page in question: https://www.sailinglcd.com/technology/customized-technical-services
🔹 Current setup:
- The image width is 1240px.
- I want both the text and image to have the same width for consistency.
🔹 My questions:
- If I use a 1000px-wide image, how can I ensure that the text and image align perfectly? Or I must use a 1240px-wide image?
- Is there a recommended way to override the default stretch behavior and keep everything visually balanced?
Would appreciate any guidance on how to fix this!
Thank you in advance. 😊
Comments
Hi,
The image is out of the wrapper due to full width option set for section where image is. As soon as we remove styles for that section, the image is within the grid size.
Nevertheless, I strongly encourage you to use the BeBuilder instead. This builder was 100% built in-house and is way lighter, faster and definitely more stable than any other website builder on the market. Moreover, it has a lot of great features that others doesn't have. The BeBuilder is based on flexbox what gives you seriously infinite possibilities of designing. Lots of our customers already switched from most popular page builders and they enjoy the BeBuilder even more. I am pretty sure you're gonna love it too.
Thank you for your reply. If I want to use the current page builder, is there any method to solve the problem with css code?
Sorry. One more question, for the size of the picture, do you have any suggestion?
No, we don't have any css solution. Like said, you need to disable full width for the section to keep image along with wrapper width.
@Albert Hi Albert, thank you for your kind reply. If I want to make it almost the same width. which width of the image is better?
1200px width should be ok but like said, it would be better to disable fill width for this section.
@Albert Thank you for your prompt reply. So how to disable full width for this section?
You're using elementor so the answer on this question you will find in elementor's doc https://elementor.com/help/how-to-create-a-full-width-page/
Hi @Albert In fact, I am using WPbakery pager builder. I found the picture on this page didn't have the same problem: https://www.sailinglcd.com/about-us, but the size of the picture is too big. If I want to use it in the same way, which smallest width of image I can use? I tried 1300px, but it has the same problem. Hope can get your help. Thank you!
What is the problem you still have? Because from what I can see image is now within the wrapper width.
I mean I didn't meet the same problem on this page: https://www.sailinglcd.com/about-us, because the image is big enough, 2560px width. But I have problem with this page: https://www.sailinglcd.com/technology/customized-technical-services, because the picture of this page is less widder. So which width of the image is perfect? Pleas kindly read all the information careful and then reply to me. it seems you have miss some information....
I will repeat what I told you above in other words maybe. So, you didn't met same problem on https://www.sailinglcd.com/about-us due to different usage of 3rd party plugin you use for building content. I will attach the screenshots below to prove what I already told you.
Do you see the difference between these 2 websites? Both have completely different classes and that's why you're experiencing noticeable differences on site. Nevertheless, images on both sites looks fine now and got same width. Image doesn't go beyond the wrapper any longer.
Nevertheless, to avoid such weird issues in the future, I strongly encourage you to switch to the the BeBuilder. This builder was 100% built in-house and is way lighter, faster and definitely more stable than any other website builder on the market. Moreover, it has a lot of great features that others doesn't have. The BeBuilder is based on flexbox what gives you seriously infinite possibilities of designing. Lots of our customers already switched from most popular page builders and they enjoy the BeBuilder even more. I am pretty sure you're gonna love it too.
In fact, they are the same website with the same plugin...
finnally, I solve this problem by myself, just adding 15px padding for the left and right in this row. :)
Ok, thanks for the update.
P.S. Despite both sites uses same plugin, then difference may come from plugin settings, it's version, other 3rd party plugins that have impact on this plugin, etc. So there is plenty of reasons why in both cases image might look different.
Sorry one mistake. Just add 15px margin at the left and right in this row.