0
Welcome Guest! Login
0 items Join Now

SOLVED Changing the logo with media query

Last Post
Search Topic

  • SOLVED Changing the logo with media query

    Posted 10 years 6 months ago
    • Hi guys,

      I can't seem to get the logo image on my Gantry template (4.1.1.8) to change when the browser is resized below 481 px.

      The code looks like this before prior to the browser resize:
      #rt-logo {
width: 290px;
height: 100px;
}
#rt-logo {
background: url(/images/mga/MGA_logo2d_bnr.png) 50% 0 no-repeat !important;
}

      This is what I have in my media query:
      @media (max-width:480px) {
    .gf-menu-toggle {
        position: fixed;
        z-index: 1000 !important;
    }
    
    .layout-mode-responsive .gf-menu {
        float: left;
    }
    
    #rt-logo {
        width: 100px;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    
    #rt-logo {
        background: url(/images/mga/MGA_logo2d_25pc.png) 50% 0 no-repeat !important;
    }
    
 
    .social-icons, .reach-out {
        display: none;
    }
}
 
      Everything else in the media query works except the logo image changeover. The only way I can get it to work is to remove !important from the rule outside of the media query, using the browser's developer tools. But that line leads me to line 22 on "index", which of course opens up as generated html in developer tools.

      Could someone please tell me what file I need to open in order to edit (or override), please?

      Many thanks in advance.

      Simon
    • Last Edit: 10 years 6 months ago by Quaverlove Studio.
    • "Let the reason be love... Quaverlove!"
    #1037668
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED Changing the logo with media query

    Posted 10 years 6 months ago
    • Could you please post a URL to your site so we can look for you. Without a link to page where the problem is on your site it is quite hard for us to provide the best solution due to so many variables. We try to provide file names and line numbers for code changes and if changes have already been made then our advice may be incorrect.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1037722

  • Re: SOLVED Changing the logo with media query

    Posted 10 years 6 months ago
    • Thanks for your offer of help, Mr T...

      Found it! :D it was the styledeclaration.php file... although creating an override didn't seem to work, so I had to edit the original.
      But, hey! Problem solved!

      Thanks again.

      Ess
    • "Let the reason be love... Quaverlove!"
    #1037732
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED Changing the logo with media query

    Posted 10 years 6 months ago
    • Never ever change our original template files as your changes will be overwritten by any updates to the template. Instead you should always use a custom CSS file and create an override.

      This is how to create a custom CSS compatible with Gantry 4...

      Simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where <TEMPLATENAME> is the name of the template as seen in template manager e.g. rt_fracture). GANTRY4 will automatically load this CSS file. If you wish, you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1037736

  • Re: SOLVED Changing the logo with media query

    Posted 10 years 6 months ago
    • Mark, I can assure you. ALL my custom codes are overrides, except that last edit. And the reason I did that was because the override I created prior didn't work.

      However, you may be able to remind me of the correct way to override a php file. I've done it before but I seem to have forgotten, as the last attempt didn't work.
      The file was in gantry > features. So I created a folder called features in the html folder and copied the styledeclaration.php file to it... and that's the file I initially edited... but nothing happened. I made the same edit to the original file and it worked.

      I'll go back and try again... after all, the only thing I took out was !important, in every sense!
    • "Let the reason be love... Quaverlove!"
    #1037748

Time to create page: 0.045 seconds