Creating a responsive logo
-
-
- Adventures
- Hero Rocketeer
- Posts: 252
- Thanks: 0
-
When I made the custom html module like initially described, my logo/banner for some reason turned out tiny, a lot smaller than the original file, maybe 40% of the original. I'd like it to cover the whole upper area of my site. In this tread there are quite a few different attempts to fix this, and some are a bit confusing.
Henning, could you possibly post a final example with the code both for the custom html module, and the code for the custom css file, where the logo is responsive, covers the whole top area and doesn't shrink?
Thanks!
-
-
-
- Adventures
- Hero Rocketeer
- Posts: 252
- Thanks: 0
-
First, sorry for all the rookie questions... Anyway, I changed header positions to 1 and position count to 1, though the logo/banner was still half the size of what it should be. Then I set force positions to ON, and that made the logo/banner the right size and responsive
but now my social media buttons disappeared...
What I would really like is to make the logo/banner cover the whole upper part without space to the sides nor menu, and also keep the social buttons. Like they have done here:
www.rossorg.com/
Do you have a tip that can help me achieve that?
Thanks so much for your patience
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
A few things to say about this.
First thing: Your big Banner is very unlucky for for a responsive template.
On narrow devices (=portrait mobiles) it will shrink very very small.
A way to tackle that issue would be to use different logo for every breakpoint ...
-
-
-
- Adventures
- Hero Rocketeer
- Posts: 252
- Thanks: 0
-
Yeah, you are right Henning, the banner looks really tiny on mobile devices, and I'd be better off using a different logo for every breakpoint. So, this is what I would like to achieve
1. For high resolution devices, computers etc. I would like to use the logo/banner, and I would like it to cover the whole upper part without space to the sides nor menu. Like they have done here:
www.rossorg.com/
2. For lower resolution devices, tablets, mobiles, I would like to use a different version of my logo (which is not so wide) for each breakpoint
3. I would like the social buttons to:
a) show on top like they used to. They disappeared when I set "force positions = on"
or
b) show on the side, like in the metropolis template. I tried adding this code to my custom css file to put them on the left side, but that didnt work.
.rt-social-buttons {position: fixed;left: 0;top: 30%;}
body .rt-social-buttons .social-button {float: none;margin: 10px;}
Do you have an example with the code both for the custom html module, and the code for the custom css file, to achieve these three things?
Again, thank you so much for your help!
-
-
-
- Adventures
- Hero Rocketeer
- Posts: 252
- Thanks: 0
-
Sorry, new link and online again:
www.liibre.com
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
You could use responsive support classes to show logos for different view ports.
You could also try to add this to your css
#rt-header div.rt-container div.rt-block {margin: 0;padding: 0;}
#rt-header .rt-block {background-color: #0092d8;}
@media screen and (max-width: 767px){
#rt-header div.rt-container div.custom {
background-size:768px 79px;
background: url( liibre.com/images/6.other/liibre-logo.jpg ) no-repeat right;
}
div.rt-image.rt-center {
min-height: 79px;
width: 200px;
background-size:768px 79px;
background: url( liibre.com/images/6.other/liibre-logo.jpg ) no-repeat;
}
div.rt-image.rt-center img {display: none;}
}
-
-
-
- Adventures
- Hero Rocketeer
- Posts: 252
- Thanks: 0
-
Thanks Henning! Works great now! Only thing missing are the social buttons. Do you know how I can recover them? Either on top as they used to, over the logo/banner on the right side. Or on the left side of the screen, like in the metropolis template. I tried adding this code to my custom css file to put them on the left side, but that didnt work.
.rt-social-buttons {position: fixed;left: 0;top: 30%;}
body .rt-social-buttons .social-button {float: none;margin: 10px;}
-
Time to create page: 0.064 seconds