Tagged: , , , , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 28, 2024 at 12:14 pm #1432259
    Munford

    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

    January 28, 2024 at 6:02 pm #1432281
    Rikard

    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 9 months, 4 weeks ago by Rikard.
    January 28, 2024 at 6:36 pm #1432289
    Munford

    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 9 months, 4 weeks ago by Munford.
    January 28, 2024 at 7:14 pm #1432293
    Mike

    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

    February 12, 2024 at 10:25 am #1434069
    Munford

    thanks – that worked
    you can close this

  • Author
    Posts
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.