Text to stay fixed width in responsive row

Support
#1

I have a problem getting text to format responsively. I’m using WP Bakery.

If you look at the employment section of this page…

https://planetarium.wales/about-planetariwm-wales/

The title and text appears inline with the text below in the Wider Benefit section when viewing on a 1280px width screen. But when you go bigger the text loses alignment.

This is because I’ve stretched this row to full width without padding with WP Bakery to get the dragon head effect.

I’m using this code which aligns to 1280px width and below…

.tantrwm_text_width_left {
margin-right: 20px;
margin-left: 12%;
}

I then put the class name in the text box in WP Bakery

How can I get the text to stay aligned to standard text width of the rest of the page at all screen sizes?

(I also have rows with text on the opposite side with half width videos - https://planetarium.wales/delivering-the-project/ - which I’d like to align the text to on the right side margin).

#2

Hello Andrew,

Thanks for writing in!

To resolve this, please edit your page back in WPBakery Page Builder. In your Row Settings, Row Stretch option should only be set to default.

Please let us know if this works out for you.

#3

That wouldn’t work, I need to set the rows to “stretch row and content (no paddings)” in order for the image of a dragon head to appear as if it’s coming from the side of the page.

https://planetarium.wales/about-planetariwm-wales/

I was hoping there would be some CSS to set the width of the text to match the margins of the theme.

#4

Hi Andrew,

That would require a lot of customization, you wish to align the text but also wish not to align the image (overflows). Both column shares the same styling and if you do some specific style then that will affect its responsiveness. You may able to achieve your preferred look on you current view, but may not on other device’s view.

I recommend adding the image as a background, and converst it to GIF so it would still animate. Then set it as your row background. Then change the row stretch setting back and the same as other rows.

Thanks!

#5

Thanks for the reply Rad.

I tried GIFs as background images but that caused other problems. I’ll persevere and if I come up with a solution I’ll post it here.

#6

You’re welcome.
Please let us know how it goes then.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.