Docs

[lukasjan]

Hey!

Button text on smaller screens do not resize properly in one page and go out of button borders. How do I change that?

Thanks,
Lukas

[lukasjan]

This reply has been marked as private.

[Joao]

Hi There,

Please add the followuing code to Appereance Customizer Custom CSS.

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {

.x-btn, .button , .x-btn.x-btn-x-large {
font-size: 1.1em;
}
}

Notice that i target devices between 768px and 1024 which should be the tablets in landscape mode. If you feel the need of applying in a wider range of devices feel free to adjust the code.

Hope that helps,

Joao

[lukasjan]

Hello,

Tried adjusting different screen px and your code and it did not change the font size. Your css by itself did not change font on cornerstone medium screen.

Lukas

[Christian]

Please remove the code give previously and use

@media (min-width: 768px) and (max-width: 1330px) {
.x-btn {
font-size: 80% !important;
}
}

You can also use Cornerstone’s Responsive Text feature. See https://cloudup.com/cSLnxP-i7XB (play in Firefox) for demo.

Thanks.

[lukasjan]

Thanks! This code worked.

I have one more question.
URL:http://www.mhealth.lt/publikacijos/
I set padding for this essential grid, which looks good on large screens. However, I want it to have paddings on large screens and at the same time be fullwidth (no paddings on left, right) on phone screen for instance. How do I set that?

[Thai]

Hey There,

Please add the following CSS:

@media (max-width: 767px){
    #esg-grid-4-1 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}

Hope it helps 🙂

[lukasjan]

Thanks, works great!

[Paul R]

You’re welcome! 🙂

[Author]

Posts