Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1432259

    Hi
    I am trying to center my h2 and h3 headings on mobile, but keep the left align on page-id-446 only.
    I tried this code but it’s not quite right – can you help with this?

    @media only screen and (max-width: 767px) {
    h3 {
    text-align: center!important;
    }
    h2 {
    text-align: center!important;
    }
    .page-id-446 h2, h3 {
    text-align: left!important;
    }}

    thanks
    Nancy

    #1432281

    Hey Munford,

    I can’t see your CSS applying at all, please post admin WordPress login details in private if you should need any further help.

    The first page you linked to gives a 404 error on my end.

    Best regards,
    Rikard

    • This reply was modified 4 months, 2 weeks ago by Rikard.
    #1432289

    I took it off temporarily since it was effecting the mobile footer and other pages h3 headings. New code is here:

    @media only screen and (max-width: 767px) {
    h3 {
    text-align: center!important;
    }
    h2 {
    text-align: center!important;
    }
    .page-id-503 h2, h3 {
    text-align: left!important;
    }}

    Check it now on the pages below
    It looks like on the mobile that all the h3 are left aligned on all pages, instead of just on page 503

    • This reply was modified 4 months, 2 weeks ago by Munford.
    #1432293

    Hi,
    With this css that you added, the H3 will be for all pages:

    .page-id-503 h2, h3 {
    text-align: left!important;
    }}

    if you want this css to say H3 for only page 503 then you should write it like this:

    .page-id-503 h2, .page-id-503 h3 {
    text-align: left!important;
    }}

    I would recommend using css that has enough specifically to not require !important;, like this:

    @media only screen and (max-width: 767px) {
    #main.all_colors h3 {
    text-align: center;
    }
    #main.all_colors h2 {
    text-align: center;
    }
    .page-id-503 #main.all_colors h2,.page-id-503 #main.all_colors h3 {
    text-align: left;
    }
    }

    Best regards,
    Mike

    #1434069

    thanks – that worked
    you can close this

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘target single page h2 h3 headings on mobile text-align’ is closed to new replies.