CODEWITHSUNDEEP
htmlcssimagesize
Kim Wist
Kim Wist

Reputation: 69

Two images display in different sizes under same code

I have a problem with a png logo image that for some reason is displayed in different sizes on two otherwise identical webpages. The only difference is that the pages are in different language.

The first example where everything is as it should is at contact

The second page, in different language with excatly the same css and settings is at contact in Finnish

The logo on the second page is wrong size and I have not been able to figure out why this happens.

The only change I made, was to change the relative padding in the taikurit.html page, to get the text inside the logo more centered. But still the logo image is wrong size and everything is otherwise the same with these two pages.

Note that all my css to control the pages is currently inlined, this is because I do testing with page-speed.

On line 158 is the only difference, which I mentioned above:

.logo2 h1{position:relative;padding:20px 0 79px;font-size:120px;line-height:120px;display:inline-block;color:#fff}

If someone knows why this happens, I would be very happy because I have looked at the code for two days now without understanding the reason.

Upvotes: 0

Views: 1010

Answers (1)

Fernando Pap
Fernando Pap

Reputation: 94

The difference lays in the next piece of code:

<span itemprop="name">Magician</span>

In the second example the logo is wrong sized (smaller) because "TAIKURI" is smaller than "MAGICIAN". Try putting in the first example a shorter text (or larger), you will see how the logo changes accordingly.

Upvotes: 1

Related Questions