How to edit my logo?

Hi,

for the first: I didn’t know where to put this, so if it’s wrong here, just move it :wink:

With the help of a free website I created a logo but I can’t find out how to edit the png-file in a way that it makes sense to insert it into my html-file. Here the logo:
logo
The problem is that it takes far to much space on the above and below. To see it better I gave the border a color:


Here also the whole workspace link:
https://www.codecademy.com/workspaces/6150332ab6b53eb547faf555

You can use the max-width and max-height properties in CSS to make it smaller.

1 Like

Doesn’t change anything unfortunately (as far as I know min-weight/height are used for the situation when the size of the browser window changes). Changing the height (not the min-height) neither doesn’t help me cause it changes the whole image, whereas I only want to make the blank part above and under my logo thinner.

I said max-height and max-width not min-height and width

1 Like

To me it looks like you’re just looking for a way to crop the image? In that case – and if you don’t have Photoshop – you find plenty of online tools. Just google “crop image online”.
Another possibility would be to wrap the image in another <div> and set that div to the dimensions you want the logo to have, like:

width: 400px;
height: 200px;

Then set the image to

display: block;
width: 100%;
height: auto;
transform: translateY(-100px);

That way you can mask the image.

1 Like

Oh ups that’s embarrassing…however, max-height doesn’t solve the problem either:

To me it looks like you’re just looking for a way to crop the image? In that case – and if you don’t have Photoshop – you find plenty of online tools. Just google “crop image online”.

So embarassing that this was the solution . Can’t explain why I didn’t get this on my own :sweat_smile:
Thanks anyway!

1 Like