Creating a responsive logo
-
-
- Adventures
- Hero Rocketeer
- Posts: 252
- Thanks: 0
-
Hi Henning!
Unfortunately, I am still struggling with these things :shock:
Social icons. I was able to move them to the left side, and they work nicely in full resolution on my desktop. However, on other devices and window sizes it's a different story. On my Ipad, they are behind the main modules, and you can barely see them, on my phone and android deveice they are above my logo/banner.
I have kind of given up having them on the side anymore. But I am not able to bring them back on top either. I would like to move them back to their original position, which I recon is in the header. However, no matter where in the header I put them, they won't show up, which is probably because of the logo/banner that is in header-a. So, can you please help me get the social icons back to the original position, on top of my logo/header, on the far right side?
Thanks again!
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
just add
#rt-header .rt-block {
overflow: hidden;
}
.rt-social-buttons {
z-index: 9999;
position: relative;
margin-top: 20px;
margin-left: 15px;
margin-right: 15px;
}
@media screen and (max-width: 767px){
.rt-social-buttons {
padding-top: 15px;
}
}
to your css
-
-
-
- Adventures
- Hero Rocketeer
- Posts: 252
- Thanks: 0
-
Excellent! Thanks Henning! Finally the social icons are back in place, that's such a relief!
Now there is just one slight problem left with the responsive logo. It works great in fullscreen on desktops, tablets and mobile. However, when I resize the browser window on my desktop computer, I get a strange effect, where parts of the logo disappears when the window is small. I attached a picture that shows this in two states. Do you have a solution for that as well? That would make my day :cheesy:
Thanks!
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
try to change the code I suggested above
to
@media screen and (max-width: 767px){
#rt-header div.rt-container div.custom {
background-size:768px 79px !important;
background: url( liibre.com/images/6.other/liibre-logo.jpg ) no-repeat right;
}
-
-
-
- Adventures
- Hero Rocketeer
- Posts: 252
- Thanks: 0
-
Hi Henning, I am sorry, I didn't have much luck with that either. Well, it works, if I remove the old code piece and replace it with your last one, the logo shows up, but on mobile devices it's tiny. Because the whole banner is resized. I experimenting a bit with it, but I just got all sorts of weird results
I uploaded a 2nd logo, a smaller version, that I thought maybe could be used for mobile devices, and resolutions under a certain size. How can I use this logo ( liibre.com/images/6.other/liibre-logo-small-slogan.jpg ) for mobile devices and small browser windows on desktops? I tried just changing the path in the last code bit you gave me, but that didn't do anything.
Thanks for bearing with me...
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
you totally mixed up the code.
First: solve your syntax errors in your css file like missing } and missing syntax for closing comments.
Be a bit more careful with your code.
-
-
-
- Adventures
- Hero Rocketeer
- Posts: 252
- Thanks: 0
-
So, I've gone over this about 700 times now, copied and pasted both your code pieces and tested several times, checked the syntax, checked for missing } and triple checked closing comments. I still get the same results...
CODE PIECE 1:
/*
To fix responsive logo v1
*/
#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;}
}
RESULT: WHEN I RESIZE THE WINDOW ON MY DESKTOP COMPUTER THE LOWER PARTS OF THE LOGO DISAPPEARS. THIS ALSO HAPPENS IN SOME BROWSERS ON MOBILE DEVICES. (I guess the reason is because of height 79. Increasing it + min width, makes it work on desktop computers, but results in wrong aspect ratio on mobile devices...)
CODE PIECE 2
/*
To fix responsive logo v2
*/
/*Make top one piece with liibre-blue background*/
#rt-header div.rt-container div.rt-block {margin: 0;padding: 0;}
#rt-header .rt-block {background-color: #0093d8;}
@media screen and (max-width: 767px){
#rt-header div.rt-container div.custom {
background-size:768px 79px !important;
background: url( liibre.com/images/6.other/liibre-logo-small-slogan.jpg ) no-repeat right;
}
}
RESULTS: WORKS, BUT THE WHOLE BANNER RESIZES, SO IT IS TINY ON MOBILE DEVICES AND IN SMALL BROWSER WINDOWS
1. Can you PLEASE tell me where I have made syntax mistakes, because I am not able to find them myself.
2. I think the best solution is to load in the small version of my logo for mobile devices and low resolution devices, instead of resizing the large banner. So, can you PLEASE tell me how I can code this so that my other logo image is loaded on mobile devices or small resolution screens ( liibre.com/images/6.other/liibre-logo-small-slogan.jpg ) ?
3. Or.... if that's not a good solution, do you have another solution so that I can fix this?
Thanks...
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
now you removed code that is needed
try
/*
To fix responsive logo v2
*/
/*Make top one piece with liibre-blue background*/
#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;}
}
but that back in please so we can adjust that.
Just a note. I just try to correct stuff based on the setp you have.
Personally I would use a different approach with that giant header pic you seem to prefer.
I would slice that up in the logo and the claim.
Also I would do different grpicks for the different viewports.
-
-
-
- Adventures
- Hero Rocketeer
- Posts: 252
- Thanks: 0
-
Still get the same result. The lower part of the logo is cut when I resize the window, and in some mobile browsers.
Personally I would use a different approach with that giant header pic you seem to prefer.
I would slice that up in the logo and the claim.
I am not quite sure what I have said to give you this impression. On the contrary, I have several times suggested changing the logo with smaller slices on lower resolutions and mobile devices, my problem is, I don't know how to do it, how to code it. I've uploaded a smaller version of the logo, and asked for advise on how to code it, but haven't gotten any so far.
I need the banner for full resolution desktops, but I am more than happy to put in other sliced versions of the logo for different resolutions, but again, I don't know how to code it, so if you please could give me a code example for the approach you think is best, I would very much appriciate it...
-
Time to create page: 0.058 seconds