This is going to be long to explain…sorry
I have this page Computer System, on my site and it works fine on desktop but when I view on my mobile device (Galaxy S8 plus, resolution 412px x 816px) the header text “Where the magic happens” does not reduce in sized based on the media query.
@media only screen and (max-device-width: 680px) and (min-device-width: 320px)
.page_header_text {
font-size: 24px !important;;
}
I have marked the header text element using the “customize” section of the element inspector and giving it a class of .“page_header_text”
Here is the source with the the actual header text tag highlighted,
Here is the CSS form that selection. You can see that the media query is being over ridden and not allowed to control the font size for mobile devices. I would have thought the fact that because I explicitly assigned the class at the element level that class would have been part of the
Plus I am using the Pro child theme on my site and I thought that the style sheet from the child theme would cascade down that CSS last and be used to adjust the style… So why do I always have to use the “!important” on all my css in the child theme?
Sorry for such a long rant, but I am really confused by all this. It is probably something obvious that I am just not seeing at thew moment. I hare used this type of technique on other sites, using the Pro theme and it works fine.