Media Query For Text/Heading Sizing

Support
#1

Hi All,

Wondering if you can help me out here. I was thinking about using media queries to auto resize the headings and text on breakpoints within Pro. I’m looking to have the text resize based on the breakpoints within pro to change the size, line height, etc on XL, LG, MD, SM, XS screens as defined in the builder.

Example:

@media only screen and (max-width: 980px-1200px) {
h1 {
font-size: 2.5em;
line-height: 1.15em;
}
}

@media only screen and (max-width: 768px-979px) {
h1 {
font-size: 2.5em;
line-height: 1.15em;
}
}

@media only screen and (max-width: 480px-767px) {
h1 {
font-size: 2em;
line-height: 1.25em;
}
}

Can you please let me know what classes to use to target the heading and text elements in Pro globally. This way I don’t have to add them to the element css all over the site. What I don’t want to do is have a heading/text for each breakpoint within the builder.

Let me know if I’m missing something here and doing way more work than I need too. Is there an easier way to do this?

Thanks,
Jonathan

#2

Hi Jonathan,

Thank you for reaching out to us! Here are the breakpoints used in X and Pro:

For extra large screens:

@media (min-width: 1200px) {

}

For large screens:

@media (min-width: 980px) and (max-width: 1199px) {

}

For medium screens:

@media (min-width: 768px) and (max-width: 979px) {

}

For small screens:

@media (min-width: 481px) and (max-width: 767px) {

}

For extra small screens:

@media (max-width: 480px) {

}

You can write your CSS inside the media queries for each screen, Please check this thread as well https://theme.co/apex/forum/t/x-pro-disappointing-responsive-text-in-posts/20701/3 If you follow the video in the mentioned thread then you’ll find the Responsive Text in page settings:

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Hope this helps!

#3

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