Home › Forums › Tutorials and Hints from Users › Changing link color for mobile devices
- This topic has 4 replies, 2 voices, and was last updated 4 months, 3 weeks ago by
Sissy.
-
AuthorPosts
-
January 8, 2023 at 07:05 UTC - Views: 29 #71537
Sissy
ParticipantI’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
January 8, 2023 at 17:29 UTC - Views: 28 #71538scrambler
ModeratorPlease 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;}
January 12, 2023 at 13:38 UTC - Views: 17 #71554Sissy
ParticipantHi
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.
January 12, 2023 at 18:16 UTC - Views: 13 #71557scrambler
ModeratorFYI, 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;}
January 13, 2023 at 05:03 UTC - Views: 8 #71558Sissy
ParticipantThank you very much for this. You’ve been a BIG help and it’s very much appreciated
-
AuthorPosts
- You must be logged in to reply to this topic.