Responsive befuttled!

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

tag in the header text itself. Instead the class “.page_header_text” is 3 DIV tags up from where the actual header text is.

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.

Hi @baddog,

Thank you for writing in, what you’re doing will work but px unit is not responsive and requires you to write a lot of CSS @media query, you can make your text/headlines automatically responsive by utilizing the em or rem unit and the Root Font Size option.

Read Kory’s explanation here regarding Utilize rem Units Along with Differing Base Font Sizes.

Now lets go to your issue, there is a syntax error on your custom CSS above, the @media query is also a block so the CSS rules inside it should be wrap in curly brackets too.

Like this:

@media only screen and (max-device-width: 680px) and (min-device-width: 320px) {
	.page_header_text {
	    font-size: 24px !important;;
	}
}

Another thing, this selector .page_header_text as you already know, this is not the actual div that wraps the headline/text directly. It was this div .x-text-content-text-primary that has the text, so your selector should be:

.page_header_text .x-text-content-text-primary {
 font-size: 24px !important;
}

Hope that shed some lights,
Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.