How to responsive column or text elements

I have created a row with a layout of 30% 70%. the problem is the column which on the 70% layout contains headline and text elements but there are not responsive on the smaller screen.
please check row No 6 (last row) in this page (secured area)
if you check the rows above it you will find they are responsive and working normally, but they have been created by slider rev and I don’t want to use it in this one.

Hi Ahmed,

Thanks for writing to us.

I checked the site, You added previous sections with revolution slider and the last section with the Headline element. In the Headline element’s Text area, the text added in h5 tag. Kindly add the text in the Text area, and choose the h5 from the element. Then add font size using the calc method.

Here is documentation of the calc method.

コーチング-Content-Pro (1)

Hope it helps you.

Thank you for your reply.

I have tried your solution, however, when I choose any tag nothing changes at all. the deadline keeps as it’s.

also, how about the text, image, and button elements? how can I make them responsive?

Basically, what I would like to achieve is to use the pro page builder to have the same results as the revolution slider’s sections. as you could see all elements in the revolution slider’ slider responsive together

Hello Ahmed,

Thanks for updating in! Please edit the page and then in your row settings, adjust the width to 100% or at least 98% and then the maximum width should only be 1050 pixels because that is the width of the row container above.


Best Regards.

Thank you again for your reply.
This is not what I wanted to achieve, let me explain by photos:
Photos number1 & 2 are made by slider revolution and as you can see on both desktop and mobile views all elements are responsive together.


while in the below photo No 3 the one made by pro page builder, the text and button elements are not responsive together with the image elements (button element are below the black line) 3

Hey Ahmed,

Your calc setup is incorrect.


You need to insert a space before and after the + like in the following screenshot.


Also, play around with the vw and px values within the calc CSS function. The vw setup is like the max font size and the px is like the miniumum font size.

In the following screenshot, you’ll see that to replicate the Headline size in Slider Revolution you need a calc setup of 9px + 1.5vw.


Please just note that it won’t be exactly accurate as the Slider Revolution size is based on Javascript which is slower as it requires complex much calculation while the builder uses the CSS Function.

Hope that helps.

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