Responsive Text Sizes

Support
#1

Hi,

Currently my site is carved into three different sizes using the hidden elements classes etc but I’m debating switching to a responsive site.

I created a test page to play around and cannot get the text in two different sized columns to match. If one section is divided in (1/2+1/2) and another section is (1/4+3/4) the text will not scale the same when using the same responsive text class. What’s the workaround to get them to match regardless of the column size etc? (I’m using X and Cornerstone)

Do you feel it’s best practice to have a responsive site or continue do have a site based on screen sizes?

Thanks

Brad

#2

Hey Brad,

That is tricky because the Responsive Text feature relies on the element’s container width. Applying the same responsive text class will give you different results. You’ll need to create another class and responsive text setup and it will require a bit of playing around with the values to get the exact same size.

There’s actually no best practice with regards to using Responsive Text and the responsive typography setting in Appearance > Typoraphy. It is just a matter of preference and the key difference is, the Responsive Text feature uses Javascript and the Typography setting purely uses CSS.

Personally, I find using the Responsive Text feature easier to setup when you’re just setting up one page. Using the responsive text in Appearance > Typography, you need to understand CSS responsive units and only use V2 text elements because they have a Font Size option.

Let’s say you chose 15px as the base for for XS view.

That will be the basis of your text’s size if you use em base font size unit.

The em unit will scale based on your base font size so if you set 25px on desktop, your text will be 25px and 15px on mobile.

Thanks.

#3

Hey Christian,

Thanks for the fast reply.

It’s definitely not easy! If I get it to match on the desktop or tablet it doesn’t match on mobile and vice versa.

I’ll play around with the base fonts under > typography and see if that helps.

I guess besides doing that the only solution for text that has to scale the same is to use the same column width / setup??

Is Pro easier to implement responsive text etc with?

Thanks

Brad

#4

Hi Brad,

It works the same way on PRO.

Sincerely I have built dozens of sites with X and I rarely use this functionality.

Most of the time it is really not necessary and in a couple of situations, it might be necessary a simple CSS can solve the issue.

Please provide your URL and let us know where you are thinking to use it and we can advise you if you should use it or not necessarily.

Let us know if you have further questions.

Cheers!

#5

Hey Joao,

Thanks for the advice.

URL not necessary, it’s just a test page and it’s more something I was debating using.

I’ll probably just leave my production site as is.

Thanks

Brad

#6

You’re welcome, Brad.

#7

Hey Christian / Joao,

Looks like changes to my typography is going to accomplish what i was looking for without responsive text.

Best way to hide a full screen background for smaller screen sizes?

Thanks

Brad

#8

Hi There,

Please provide the URL so we provide you a tailored solution.

Thanks

#9

Hey Joao,

Unfortunately my site is HIPAA complaint and blocked off by IP only. I’m hoping to have my Dev site released of HIPAA compliance for troubleshooting etc in the near future.

Any suggestions that I can play with would be great. I understand it may not be tailored

Thanks

Brad

#10

Hi There

Add an ID to your section, for example, my-section

Add the following CSS to Cornerstone CSS

@media(max-width: 480px) {
#my-section {
background-image: none !important;
}}

Let us know how it goes!

#11

Thanks Joao,

I’ll give that a try!

Brad

#12

Sure do let us know how it goes!

#13

Hey Nabeel,

Unfortunately the above code didn’t hide the background.

I’m using the integrity theme with the X child theme if it makes a difference.

Other ideas?

Thanks

Brad

#14

Hey Brad,

Can you please try this instead:

@media screen and (max-width: 979px) {
    #sectionID {
        background-image: none !important;
    }
}

Let us know how this goes!

#15

Thanks Nabeel,

I’ll give it a try and will let you know.

thanks!

Brad

#16

Please let us know how it went.

Thanks.

#17

Hi Bappi,

I"m not familiar with the section ID part. How’s it work?

Thanks

Brad

#18

Hi Brad,

You need to inspect your selected section using chrome dev tools or similar tools for safari/firefox to get the section ID.

Then replace that section ID within Nabeel’s code.

Thanks.

#19

Got it! I’ll test it now.

Thanks

Brad

#20

You’re always welcome Brad!

Cheers`