Media Query Format?

[Clemson Web Design]

Clemson Web Design

July 12, 2017 at 7:39 am

I’m having a hard time using min-max media queries with the theme? I linted my child theme style.css. No errors. Couple of warnings, thats it.

Example. At the bottom of my child themes style.css. I have some test CSS. Its as follows

@media only screen and (min-width: 544px) and (max-width: 1200px){
.portfolio-loop-image-container .portfolio-hover-item .portfolio-hover-item-inner .portfolio-loop-title {font-size: 30px;color:red;}
}/* End 544px */

It changes the portfolio title on my home page to 30px and colors it red. It should work between 544px all the way to 1200px. Right.

The issue is the media query gets over ridden at 1074px instead of the max-width of 1200px?

See the portfolio grid on my dev home page @ *Login to see link

I looked in grid.less and came out with these break points.

@media (min-width: 544px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {}

@media (min-width: 1200px) {}

@media (min-width: 1500px) {}

Do I need to follow this format for media queries to work not be over written? I’m working against the WordPress theme settings, the main ascend.css (in my case cwd.css) seems to be over riding my child theme style.css. Shouldnt the child theme style.css override any default theme styling?

Are the grid.less break points the correct format to follow? Seems like there would be a better way as it will require styling even simple things from the ground up.

I’m obviously missing break points or something? Any idea?