Home Forums Tutorials and Hints from Users Changing link color for mobile devices

Topic Resolution: Resolved
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #71537
    Sissy
    Participant

    I’m also new at this – sorry if this is an obvious question!

    I am wanting to change the colour of the links on specific pages of my website for mobile devices. Based on what I’ve read, I think  the syntax would be:

    .link.is-mobile{
    color:#000000;
    }

    I have added this to the global custom css in the customizer, but it doesn’t work (I have also referenced link.is-mobile in “additional css classes” input box on the on the individual page that I want the change to occur).

    Also, If I wanted to make this a site-wide change what would be the syntax when adding is to the custom css links section in the customizer?

    I have a feeling that I am adding the css coding (not 100% sure the syntax is correct) in the wrong place. I am very much new to css, so any help would be appreciated. Thanks

     

     

     

     

     

    #71538
    scrambler
    Moderator

    Please provide a link to the page in question with specifics about which links are concerned as it may depend where the links are.

    As an example, for a page with the page ID xxxx , the rule to add to the theme global css would be

    .page-id-xxxx .wrapper a {color:blue;}

     

    #71554
    Sissy
    Participant

    Hi

     

    The page is https://careerswithoutmatric.co.za/completing-schooling/obtaining-matric-results/

     

    Ways to get your matric results boxes 2 and 4. The links in these boxes (actually columns that look like boxes) are unreadable on mobile. I can change the colour of the links for all devices (which I probably will do) but I would like to know in future if I come up with a similar problem, that there is a solution. I’m unsure of the syntax to use.

     

    Thanks for your help.

    #71557
    scrambler
    Moderator

    FYI, light orange on grey is VERY hard to read even on desktop, and downright impossible for color blind people. Always maintain a good contrast in grey level!!

    If you inspect your page with the browser developer tools (F12), you can see the CSS selectors used in the hierarchy and create a CSS rule that affects the area you like

    To limit the CSS to that specific page, given the page ID (found in the editing page) is 88, the selector will be:  .page-id-88 

    The selector for mobile devices is: .is-mobile

    The selector for the whole site is: .wrapper

    The selector for the content area is: .content

    The selector for just the block being used is: .wp-block-cover__inner-container

    The selector for the links is: a

    The CSS property for the color is: {color:red;}

    Selectors not at the same levels are separated by a space, the one on the same level like the page class and the device class are attached.

    So to change the link color only on that page, only on mobile and for the whole content area, the rule would be

    .is-mobile.page-id-88 .content a {color:red;}

    To change it on this block only regarding of page or device

    .wp-block-cover__inner-container a {color:red;}

     

    #71558
    Sissy
    Participant

    Thank you very much for this. You’ve been a BIG help and it’s very much appreciated

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.