Changing link color for mobile devices

[Sissy]

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

 

 

 

 

 

[scrambler]

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;}

 

[Sissy]

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.

[scrambler]

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;}

 

[Sissy]

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

[Author]

Posts