Archived topic
GPP / Customizer / CSS
6 replies · Started by Jan on August 2, 2021
Hi David,
I'd like to improve readability on mobile especially when text layers above an image.
In order to achieve that I have...
(1) added a bright transparent background color to the container around the text
(2) changed the text color of the h1 and h3 heading from white to black and
(3) changed the text color of the button from white to black.
--> The desired result is attached in the screenshot below
Applying these changes in the block editor was a piece of cake. Now I'd like these changes to appear on mobile only. Therefore I have added the following CSS to the Customizer:
@media (max-width: 767px)
.gb-container .gb-container-f8f44f3b {
background-color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 767px)
h1.gb-headline-a893daf6 h3.gb-headline-03a39ef3 {
color: #000000;
}
@media (max-width: 767px)
.gb-button-wrapper a.gb-button-1ee75bcd, .gb-button-wrapper a.gb-button-1ee75bcd:visited {
color: #000000;
}Unfortunately the changes are not taking effect on mobile. Which errors can you spot in the CSS that I'm not seeing?
Thanks,
Jan
Hi Jan,
Your CSS has some format issue, I corrected it for you, try this one:
@media (max-width: 767px){
.gb-container .gb-container-f8f44f3b {
background-color: rgba(255, 255, 255, 0.5);
}
h1.gb-headline-a893daf6 h3.gb-headline-03a39ef3 {
color: #000000;
}
.gb-button-wrapper a.gb-button-1ee75bcd, .gb-button-wrapper a.gb-button-1ee75bcd:visited {
color: #000000;
}
}This was very helpful indeed, Ying.
I replaced the CSS and it looks almost perfect, except the black text color for h1 and h2 is missing.
Could you please take a look at the modified page again?
Thanks,
Jan
Dear Ying,
I’m really sorry for pushing on this.
Did you get a chance to re-check the CSS regarding font color for h1 and h2?
Any thoughts/ advise would be greatly appreciated.
Kind regards,
Jan
Hi Jan,
I remember replying to this. Perhaps it didn't get through.
Let's fix Ying's CSS a bit.
This part here: h1.gb-headline-a893daf6 h3.gb-headline-03a39ef3 needs a comma.
Try using this selector instead.
h1.gb-headline-a893daf6, h3.gb-headline-03a39ef3
OMG. Why didn't I see that myself ;-/
Many thanks for pointing this out, Elvin.
No problem. Glad to be of any help. ;)
