X pro ــــــ disappointing responsive text in posts

[tarekr]

Hello,
I am using normal editor for posts in X pro.
I have this post https://tarekrabaa.com/ar/?p=102.
I want to change the font size for the heading H4 and H3 but to keep it responsive.

I was doing this before with cornerstone using responsive text selector. with the X pro i got lost.
This is disappointing.
Every time i want to publish something there is a problem,

I added this CSS code to the post: <style> p { font-size: 22px; } h4 { font-size: 24px; } h3 { font-size: 26px; } </style>
but this is not responsive at all. How to make it responsive? I lost all text responsiveness i did when i switched to X pro.
Also the styling i used for fonts is not working well.
Plz help

[tarekr]

I cannot see any documentation explaining this issue.

[christian]

Hey @tarekr,

Responsive Text feature was not removed. It’s still under Cornerstone Settings which was moved in the lower left corner of the interface. Please see https://youtu.be/_ia5Lswi3ak

Would you mind giving us more details about your other issue?

@tarekr

Also the styling i used for fonts is not working well.

Thanks.

[tarekr]

Hi,
I am not using neither cornerstone nor the PRO editor for editing post. I am using normal text editor.
If i edit in X pro, i will loose all the text and i need to rewrite again.
allo!!!

thx

[nabeel]

Hi again,

You can do it with CSS media queries to make it responsive, replace your CSS with the following code:

@media screen and (max-width: 1024px) {
  p {
    font-size: 22px;
  }
  h4 {
    font-size: 24px;
  }
  h3 {
    font-size: 26px;
  }
}

@media screen and (max-width: 980px) {
  p {
    font-size: 18px;
  }
  h4 {
    font-size: 20px;
  }
  h3 {
    font-size: 22px;
  }
}

@media screen and (max-width: 480px) {
  p {
    font-size: 16px;
  }
  h4 {
    font-size: 18px;
  }
  h3 {
    font-size: 20px;
  }
}

Hope this helps!

[tarekr]

Hi.
It is not working

[paul.r]

Hi,

You need to add the css code in Theme Options > CSS and remove the <style></style>