Creating a responsive logo
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
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.
-
-
-
- Techdreamer
- Newbie
- Posts: 17
- Thanks: 0
-
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
- Elite Rocketeer
- Posts: 2142
- Thanks: 0
- It isn't a customer html file - it is a custom module
- www.c3p0.se - sweden
-
-
-
- Techdreamer
- Newbie
- Posts: 17
- Thanks: 0
-
Hi Damo,
Thanks for poiting out. Just wonder you can show mw how to do it. I'm newbie
Thanks in advance
-
-
-
- damo
- Elite Rocketeer
- Posts: 2142
- Thanks: 0
- Create a new 'custom html' module and add the code above .. with path to your image
- www.c3p0.se - sweden
-
-
-
- Techdreamer
- Newbie
- Posts: 17
- Thanks: 0
-
Thanks, what i did was create an article, and assign to the header section...It works.
Thank you
-
-
-
- DangerDynamite
- Sr. Rocketeer
- Posts: 145
- Thanks: 0
- Web Developer
-
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
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
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;;}}
-
-
-
- DangerDynamite
- Sr. Rocketeer
- Posts: 145
- Thanks: 0
- Web Developer
- 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.
-
-
-
- JJ Spelman
- Sr. Rocketeer
- Posts: 236
- Thanks: 1
-
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.046 seconds