Reply To: Struggling with the responsive css styles


I thought that by adding a responsive.css to the child theme I could add css to style the site

This won’t work. Only template files can be overridden by default on a child theme. responsive.css is not a default WordPress theme file. It’s not even included on all themes. Originally, all of Frontier’s css is found on style.css but I separated the media queries from usual css codes so that the option to turn off responsive layout will work.

Why do you want to add a responsive.css file? You can just add your CSS on either the Custom CSS option or on the child-theme’s style.css

I also thought that adding any styles under say the @media screen and (max-width:360px) would only be read when the site is viewed on a mobile.

CSS can’t distinguish between different kinds of devices. It can only add rules depending on screen width.

Ex. The code below means: If the screen width is 360px or below then change the header background color to black.

@media screen and (max-width:360px){
   #header {background-color: #000;}