Docs

[guybower1]

hi

I have pretty much got the size looking god for larger screens and laptops, but want to tweak some things for tablets and mobiles, but just unsure how to proceed.

Firstly with text elements, what is the best way to proceed? is it to use the responsive text setting for the particular page? if so, how?

As an example, if I have a text block has a class of address and is formatted to 11px through CSS, how would I enable that text to be visible on a mobile device? For that matter, what would happen if someone had a really large screen; how is it possible to resize text responsively like that so it appears nicely on all screen sizes?

Another post talked about to apply options per element and then all adding visibility classes at the element’s class option.

x-hide-xs – mobile
x-hide-sm – between mobile and tablet
x-hide-md – tablet
x-hide-lg – desktop/laptop
x-hide-xl – wide screen

How can this be utilised when some elements already have a class ID?

url is feastthailand.com

Thanks in advance

cheers

[Christian]

Hey there,

For text, the best feature to use is Responsive Text setting. See https://community.theme.co/kb/shortcode-walkthrough-responsive-text/ for usage instructions. You won’t have to use the shortcode if in Cornerstone as you can set it up in the Settings tab.

If a class has been applied to the text, you should remove the font-size.

For mobile visibility, you can utilize those classes you’ve listed. But, it would be best if you have a designer and developer to create custom media queries specifically for you content.

You can assign multiple classes to an element. Classes are separated by a space like: x-hide-xs x-hide-lg

Thanks.

[guybower1]

hi Christian

Thanks so much for your reply.

If I remove the text size from my class in CSS, could I put it in the Style section instead and have it control the text?

As an example, I have a CSS for all things called Body class. This sets font size to 14px as well as font family, colour etc. If I remove size, how will I control the size of this whole class?

cheers

[Christian]

Hey there,

The size must be set in the Responsive Text setting. You will need to set the minimum and maximum font size and adjust or play around with the compression value to get the desired result.

Thanks.

[guybower1]

Hi Christian

OK, so if I had a class ID as address, I would remove the size component in the CSS and put the class ID address in the Selector section of the Responsive Text section. Is that correct?

cheers

[guybower1]

hi Christian

Mixed results with the responsive text. May I ask if it works off the current screen resolution, or the screen size? The reason I ask is that even on my Galaxy S5 the text looks a little too big, but now on the laptop it is about where I had it when set to 11px in CSS.

But on the phone, it should get smaller, as I have min size set to 6px. Yet it still looks oversized, which is why I asked about screen size vs res. My S5 can be 1080 x 1920 res, yet the screen width is about 430px. If it is resizing based on res, then it will never hit the mark on really small devices.

If the class of the text I’m referring to was address, could I use something like this?

@media only screen and (max-width: 430px) {
.address{
font-size: 6px;
}
}

@media only screen and (max-width: 778px) {
.address{
font-size: 9px;
}

}

And so on. Could that be a way to handle things, or do you still think responsive text will be the better way?

cheers

[Rad]

Hi there,

Yes, you could use that but you’ll be applying !important too. That should prioritize your styling.

@media only screen and (max-width: 430px) {
.address{
font-size: 6px !important;
}
}

@media only screen and (max-width: 778px) {
.address{
font-size: 9px !important;
}

}

Cheers!

[guybower1]

hi Rad

Thanks so much for your reply.

My question about above code is whether the setting for, say, 778px would not also be handling the 480px, as it just says max-width. Will those 2 settings above hand off to each other? So 0 – 480px handled by code 1 and 481 to 778 handled by code 2, is that how that would work?

So Paul, any suggestion as to sizes to go with to cover most bases? I guess I’d be looking at covering mobile phones, tablets, laptops and desktops with normal and very large screens.

Looks to be really large monitor screen about 34″, normal sized monitors maybe 22 or 24″, maybe 10″ for a larger tablet, around 7″ for a smaller tablet and around 4 or 5 for a mobile phone.

Would you be happy with the following, or any suggestions to cover things more appropriately?

3250px Large Monitor
2300px Normal Monitor
963px Tablet
680px Small Tablet
490px Mobile Phone

And I am assuming that more than just one selector could be used, am I correct? So if you had various headings, body text etc that you wanted to control, you could have something like:

@media only screen and (max-width: 490px) {
.address{
font-size: 7px !important;
.body{
font-size: 11px !important;
.history{
font-size: 12px !important;
.h1{
font-size: 14px !important;
.h2{
font-size: 16px !important;
}

}

Is that the type of thing that could work?

cheers

[Paul R]

Hi,

1. max-width: 778px will affect all screen width from 778px and below unless you override it with another 480px media query.

eg.

@media only screen and (max-width: 778px) {
.address{
   font-size: 9px !important;
}
}

@media only screen and (max-width: 480px) {
.address{
   font-size: 5px !important;
}
}

2. Yes, you can use multiple selectors in one media queries.

Please be careful with the curly brackets and it doesn’t need to always put !important

eg.

@media only screen and (max-width: 490px) {
    .address {
         font-size: 7px;
    }

    .body {
         font-size: 11px;
    }

    .history {
         font-size: 12px;
    }

    .h1 {
         font-size: 14px;
    }

    .h2 {
         font-size: 16px;
    }
}

3. With regards to breakpoints, it is always good to stick with the standard media queries.

Media Queries for Standard Devices

Hope that helps.

[guybower1]

cheers Paul. Some great info there. The link has some terrific info, so thanks.

I will l play around with the best way to go, whether responsive text or media query

Thanks again

Regards

[Rupok]

You are welcome!

Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts