Docs

[SixIT]

Hi there,

I have some custom CSS that reduces the size of a heading on my homepage for mobile view ports, please see below:

@media (max-width:480px) {
.home #x-section-1 .x-text > h3 {
font-size: 120%;
}
}

How would I go about doing the same on different pages (for example this page http://www.ywpfoundation.com/projects-we-support/iucns-species-survival-commission/)

Thanks in advance,

Joe

[Jade]

Hi Joe,

Please try these selectors:

@media (max-width:480px) {
    .home #x-section-1 .x-text > h3 {
        font-size: 120%;
    }

    .page h1 {

    }
    .page h2 {

    }
    .page h3 {

    }
    .page h4 {

    }
    .page h5 {

    }
    .page h6 {

    }
}

Kindly supply the font size that you want to use inside the selectors.

[SixIT]

Hi Jade,

Thanks for that I managed to figure it out using the page id’s

Cheers,

Joe

[Joao]

Glad to hear it Joe,

Let us know if you need help with anything else.

Joao

[Author]

Posts