• Resolved hansaplasts

    (@hansaplasts)


    For some reason Customizr includes the HTML width/height in the logo.

    <a class="site-logo" title="title" href="https://somesite.com/">
      <img class=" attachment-2638" width="600" height="100" src="logo.png" style="height: 100px; width: 600px;">
    </a>

    I have overidden the css part but am unable to override the HTML part.

    .site-logo > img {
    	height: 100% !important;
    	width: 100% !important;
    }

    How can I override it?

    Best regards, Hansa.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Override the html part? What’s the sense?
    https://www.w3schools.com/tags/att_img_width.asp

    Thread Starter hansaplasts

    (@hansaplasts)

    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.

    Thread Starter hansaplasts

    (@hansaplasts)

    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

    Thread Starter hansaplasts

    (@hansaplasts)

    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
    ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Cannot override logo html elements’ is closed to new replies.