The browser on my mobile displays the logo stretched across its screen.
As for the sense.
- CSS can be cached by browsers for performance;
- are a lot easier to maintain for a development perspective;
- provide a clear separation of markup from styling;
- produces cleaner HTML markup and
- is more efficient with selectors to apply rules to multiple elements on a page improving management as well as making your page size smaller.
Inline elements only affect their respective element.
A link to your site will help to see your issue, also saying with which mobile dev you’re experiencing it will help. Does it occur also with the demo site?
The sense’s “points” you proposed are about
style="height: 100px; width: 600px;"
but when you talk about
HTML width/height in the logo.
you talk about
width="600" height="100"
right?
The link I gave you talks about images attributes, and those are images attributes, they are the original image’s width and height.
As for the issue with the inline style, which clearly affect just their element, they’re added with javascript, and as you know adding css style to a specific element, with javascript, produces an inline style. The reason why they’re added (and they’re added to the logo just if you select a sticky header) is to allow transitions CSS3 effects on it.
Also:
.site-logo > img {
height: 100% !important;
width: 100% !important;
}
what means height: 100% !important; Force the height of that image to be 100% of its container height? You might want to use height: auto !important; maybe…
Hope this helps.
Yes! That did the trick! I’m not that familiar with css, html as well as attributes and therefore still consider myself a noob 🙂
Thanks for the solution and your time!
Glad you solved.
Could you mark this topic as resolved?
Thanks
Of course.
Correction: You solved it 😉
Cheers!
Then somebody else solved it, I learned it from someone who learned it from someone … So who invented that? eheh
😉
