Struggling with the responsive css styles

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #5122
    Kev
    Guest

    Hi,
    I have been developing this site for a while now using the Frontier theme as its base and everything is working well.

    Well it was until I went onto the site with a mobile. The site is desired to be responsive and I thought that by adding a responsive.css to the child theme I could add css to style the site on a particular resolution?

    I haven’t looked at too much responsive type css before but I added some css to the responsive.css

    I noticed the two top right links were now inside the main background image red area and wanted to move them up in to the white area.

    I added some css under the device size @media screen and (max-width:360px) in my child themes responsive.css and it didn’t work. So I added it to the main theme responsive css and it worked. I then FTP’d into the site and physically removed the responsive.css file from the main theme folder and the site isn’t responsive at all now. SO the responsive.css isn’t being seen in the child theme folder? Or am I doing things completely wrong.

    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.
    This doesn’t seem to be the case as i altered the padding to the top of both the top links in the responsive.css and it also changed the padding to these two links on the site when viewed on the laptop? Am I going about this the wrong way??

    Been a great theme to work with this for me and I have enjoyed learning a lot.
    I look forward to any pointers you may be able to give, even if there links to more reading, as I do enjoy reading up etc. Just difficult to find the right info sometimes.
    Regards
    Kev

    #5129
    Ron
    Keymaster

    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;}
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘WordPress Themes’ is closed to new topics and replies.