media query unable to kick in

The link of my wordpress site is as follow:

https://perak.pasolinks.com

The web developer tools that works showed in the media query page:

https://perak.pasolinks.com/?page_id=251

Thanks in advance.

Your class names are content-area and childsimone-page. In the screenshot you provided it says class="content-area.childsimone.page".

The correct one is class="content-area childsimone-page"

hi QXARE, thanks for your idea,

Actually when i put
class=”content-area.childsimone.page” and
class=”content-area.childsimone-page”

It works at developer tools (Firefox).

However, it does not work in my wordpress when i code in my childsimone-style.css

@media screen and (max-width: 1539px) and (min-width: 1160px){
.content-area.childsimone-page {
margin-left: 0;
padding-left: 0;
}
}

I have faced this issue for some time, wondering if because the problem is this,

The stylesheet https://perak…. was not loaded because its MIME type, “text/html”, is not “text/css”.
(https://perak.pasolinks.com/?page_id=251)

However, i am sure that in my child theme, the file is childsimone-style.css

The css file childsimone-style.css is not enqueued at all on page with id 251, while on the home page it’s enqueued/loaded correctly (handler: childsimone-styles-css) and when I change the class manually in dev tools, it works as desired.
There really might be an issue with the enqueue procedure?

Thanks again for your reply, QXARE

Yes, you are right, the css file childsimone-style.css is not enqueued at page with id 251

i only want to enqueue for main page.

When i change the class in dev tools, it works too.

Can you please enlarge the and desize the webpage of perak.pasolinks.com?
When the page is very small the media query kicks in, same when the page is large in place.
However, there is only 1 media query that does not work:

@media screen and (max-width: 1539px) and (min-width: 1160px){
.content-area.childsimone-page {
margin-left: 0;
padding-left: 0;
}
}

I really don’t understand why it did not work…

At https://perak.pasolinks.com/?page_id=262

You may find all media query kick in,
unless for the first one…. (really wonder why….)

media=”all”
@media screen and (max-width: 1539px) and (min-width: 1160px)
.content-area {
float: left;
width: 100%;
margin-left: -380px;
padding-left: 380px;

Above the original media screen, i would like to make it become zero, so that the white space for widget area is not seen.
When the media screen is larger or smaller than this, all work well.

As said, the media query css works, but the <div id="primary" class="content-area"> doesn’t have the class childsimone-page, neither on front page, nor on the example page.

Yes i got it finally. HUHUHUHU

Thanks QXARE.

I am actually don’t know about CSS thing, just following some steps. Found out i miss out sth:

<div id=”primary” class=”content-area childsimone-page”>