I see no logo in Chrome so what does the screen shot look like with it?

HI , Firefox takes code errors a little more strictly than other browsers as per W3C.org (World Wide Web Consortium) in charge of standards and practices and future development of web pages and web browsers make the rules on code. Mozilla Firefox follows these rules. W3C.org Who make the rules for web code. HTML https://validator.w3.org/ CSS https://jigsaw.w3.org/css-validator/ and https://validator.w3.org/i18n-checker/ and http://mobile.css-validator.org/

Could you please clean the code errors on your home page https://phepthuat.com to see if that helps with the issue.

Errors = https://validator.w3.org/nu/?doc=https%3A%2F%2Fphepthuat.com%2F and congrats your CSS is perfect.

Please let us know if this solved your issue or if need further assistance.

This one?

https://phepthuat.com/wp-content/uploads/2018/02/logo_phepthuat.com_.svg

You have this style rule for that img element:

#header-logo-image img{margin-bottom:0; width:85%;}

Okay, but: 85% of what? The problem is that you have the image in a link in a floated element, which is itself in a floated element. By default, a floated element has a width of zero. So the img width is computed as zero.

You need to give a defined width to the img OR to these two container divs:

<div id="header-left-section">
  <div id="header-logo-image">
    <a class="custom-logo-link">
      <img class="custom-logo">

I'm not sure of the desired size, but you could start from width: 100% on the two divs (default behavior for non-floated divs) and adjust from there.

Okay, now that I look at Chrome, it thinks the image has a natural width of 300px and it is showing it at 244px width. I don't know where it gets that natural width or how it decides on 244px as the resized width. ???

But anyway, my suggestion to use width: 100% would be too large. You could start around 290px and see how you go.

jscher2000 said

Okay, now that I look at Chrome, it thinks the image has a natural width of 300px and it is showing it at 244px width. I don't know where it gets that natural width or how it decides on 244px as the resized width. ??? But anyway, my suggestion to use width: 100% would be too large. You could start around 290px and see how you go.

100% and 290px not working.

WestEnd said

I see no logo in Chrome so what does the screen shot look like with it?

Hi, if your issue is solved could you please mark the Solution that help. Thank You

nhutpham said

jscher2000 said

Okay, now that I look at Chrome, it thinks the image has a natural width of 300px and it is showing it at 244px width. I don't know where it gets that natural width or how it decides on 244px as the resized width. ??? But anyway, my suggestion to use width: 100% would be too large. You could start around 290px and see how you go.

100% and 290px not working.

Where did you put the change?

Option #1 (directly set the image size):

<div id="header-left-section">
  <div id="header-logo-image">
    <a class="custom-logo-link">
      <img class="custom-logo" style="width: 245px">

Option #2 (counteract the collapsing effect of float:left):

<div id="header-left-section">
  <div id="header-logo-image" style="width: 290px">
    <a class="custom-logo-link">
      <img class="custom-logo">

I see the logo when I make the Firefox window smaller.

There is an @media screen and (max-width:768px) rules that displays the header logo image, but that rule isn't applied when the next @media rule gets active (@media screen and (max-width:1190px)).

jscher2000 said

nhutpham said

jscher2000 said

Okay, now that I look at Chrome, it thinks the image has a natural width of 300px and it is showing it at 244px width. I don't know where it gets that natural width or how it decides on 244px as the resized width. ??? But anyway, my suggestion to use width: 100% would be too large. You could start around 290px and see how you go.

100% and 290px not working.

Where did you put the change?

Option #1 (directly set the image size):

<div id="header-left-section">
  <div id="header-logo-image">
    <a class="custom-logo-link">
      <img class="custom-logo" style="width: 245px">

Option #2 (counteract the collapsing effect of float:left):

<div id="header-left-section">
  <div id="header-logo-image" style="width: 290px">
    <a class="custom-logo-link">
      <img class="custom-logo">

Yes, I replaced 85% by 250px it worked well for all browsers. Why when using 85% chrome, all browsers displays good but tiny images on firefox? Anyway, the problem has been solved thanks you.