0
Welcome Guest! Login
0 items Join Now

Creating a responsive logo

    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 89700
    • Thanks: 11707
    • Web Designer/Developer

    Re: Creating a responsive logo

    Posted 7 years 6 months ago
    • To make a responsive logo please see this http://www.rockettheme.com/forum/index.php?f=671&t=177988&rb_v=viewtopic .

      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 e.g. rt_fracture). GANTRY4 will automatically load this CSS file. 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.
  • Re: Creating a responsive logo

    Posted 7 years 6 months ago
    • Hello All,

      Sorry for stupid question but where will we put the custom HTML file? and how to assign it to header-a?
      I'm using Rt_kirigami and need to make my logo responsive.
      Thanks
    • damo's Avatar
    • damo
    • Elite Rocketeer
    • Posts: 2142
    • Thanks: 0

    Re: Creating a responsive logo

    Posted 7 years 6 months ago
    • It isn't a customer html file - it is a custom module
    • www.c3p0.se - sweden
  • Re: Creating a responsive logo

    Posted 7 years 6 months ago
    • Hi Damo,

      Thanks for poiting out. Just wonder you can show mw how to do it. I'm newbie :-)

      Thanks in advance
    • damo's Avatar
    • damo
    • Elite Rocketeer
    • Posts: 2142
    • Thanks: 0

    Re: Creating a responsive logo

    Posted 7 years 6 months ago
    • Create a new 'custom html' module and add the code above .. with path to your image
    • www.c3p0.se - sweden
  • Re: Creating a responsive logo

    Posted 7 years 6 months ago
    • Thanks, what i did was create an article, and assign to the header section...It works.

      Thank you
  • Re: Creating a responsive logo

    Posted 7 years 6 months ago
    • Is it possible to define how much the logo image scales for each responsive size? My logo gets overlapped by the menu on two of the responsive sizes but looks great on mobile size and 1200px size.

      Help? celebrateagriculture.dangertest.com/
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29361
    • Thanks: 954
    • Volunteer

    Re: Creating a responsive logo

    Posted 7 years 6 months ago
    • try adding this

      @media only screen and (min-width: 768px) and (max-width: 959px) {
      div.logoimg img {width: 250px;}}

      @media only screen and (min-width: 960px) and (max-width: 1199px) {
      div.logoimg img {width: 350px;;}}
  • Re: Creating a responsive logo

    Posted 7 years 6 months ago
    • Thanks Henning, that worked perfectly! I added some margins to position the logo correctly for each responsive size, but otherwise that the exact code I needed.
  • Re: Creating a responsive logo

    Posted 7 years 6 months ago
    • Thanks for the tip! I was going crazy trying to figure out how to make a logo responsive.

      I also did away with some of the spacing issues by changing the padding around the rt-block for the custom html logo module in my custom css file - which allowed the logo to be larger. However, because the site I am doing has a very "horizontal" logo, it still wasn't enough. So I changed the header layout from 3-7-2, to 4-6-2 so my logo would show up wider, and thus, larger.

      Then i realized that messed up the layouts for the tablets and phones. Oh well.

Time to create page: 0.110 seconds