Creating a responsive logo
-
-
- DangerDynamite
- Sr. Rocketeer
- Posts: 145
- Thanks: 0
- Web Developer
-
Hey Henning,
OK, so the logo is working wonderfully in most browsers, however, in IE it is MUCH smaller than in other browsers. Any idea how to fix this?
celebrateagriculture.dangertest.com/
This image is hidden for guests.
Please log in or register to see it.
This image is hidden for guests.
Please log in or register to see it.
-
-
-
- DangerDynamite
- Sr. Rocketeer
- Posts: 145
- Thanks: 0
- Web Developer
- Nope, thats in IE9. I tested it on 4 separate machines running IE9 and they all give the same results.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
ugh thats a bit more tricky ... I see where it's coming from (from parts of the responsive css).
Not sure if I can solve it today but I'm pretty sure tomorrow ... (just a matter of time ok?)
-
-
-
- DangerDynamite
- Sr. Rocketeer
- Posts: 145
- Thanks: 0
- Web Developer
- Yeah absolutely, thanks Henning! I will hold tight until you post an update!
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
can you try to add this to your css?
@media only screen and (min-width: 1200px) {
#rt-header div.rt-container div.rt-grid-3 {width: 500px;max-width: 500px;}
#rt-header div.rt-container div.rt-grid-9 {width: 700px;max-width: 700px;}
}
not sure if it already solves your issue but it should be a start ...
-
-
-
- DangerDynamite
- Sr. Rocketeer
- Posts: 145
- Thanks: 0
- Web Developer
-
Hey Henning,
OK, so I got everything working with that code you provided, that worked perfectly. However, I have a new issue. In IE8 the dimensions are forced to the 960px width instead of the 1200px width. In doing so the logo and the showcase RokSproket slideshow are staying the same size they would be for 1200px and are far too big for the smaller 960px width the site is forcing for IE8. Any idea how to fix this?
Cheers,
Danger.
-
-
-
- DangerDynamite
- Sr. Rocketeer
- Posts: 145
- Thanks: 0
- Web Developer
- Never mind, I figured it out and forced the 1200px width on the IE rules.
-
-
-
- Alessandro Malatesta
- Jr. Rocketeer
- Posts: 36
- Thanks: 0
-
ismadman wrote:
I had the same Issue John.
I added some code to my custom override stylesheet - templates/rt_graffito/css/rt_graffito-custom.css
I changed it to this as inline border:0 is obsolete in html5
Source: www.w3.org/TR/html-markup/img.html
Apparently it is fine via a stylesheet
templates/rt_graffito/css/rt_graffito-custom.css/* Logo */ .logoimg {max-height: 50px; margin: -23px 0 10px -20px;} div.rt-image .logoimg img {max-width: 120%;border:0;border-style: none;} @media only screen and (max-width: 480px) { div.rt-image .logoimg img {max-width: 100%;} } /* End Logo */
Custom Html<div class="rt-image rt-center"> <div class="logoimg"> <img src="images/my-logo.png" alt="My logo" /> </div> </div>
My Logo image size is 312 px wide x 82 px and sits nice now.
The margins in my stylesheet were just to position it better.
Also don't know if my code is valid but it works here on all devices
Maybe someone with a bit more smartz can clarify but as I said it looks good here.
Hi,
I did as you say and it works fine, thank you for the advice.
I have just a little problem: the logo seems to have a very light border/shadow I don't manage to remove:
This image is hidden for guests.
Please log in or register to see it.
Any idea?
-
Time to create page: 0.081 seconds