devRant logo in the web version main page is cropped just a bit at the right edge.

Have a nice day!

By the way, it's not the case on the rant page.

Using a 1366x768 monitor, firefox, and that doesn't happen until i zoom in more than 260%.

@melezorus34 if you really have that kind of a monitor, may I express my deepest condolences.

@kiki i mean, the laptop was cheap

problem is with the

.icon-rantsemoticon-base1 {

width: 0.8583984375em;

}

Setting it at 30px fixes the problem. (Or in devrant units : 1em)

(Never understand why you would scale a picture based on a font size)

Personally, I never use em. px if there is no choice but for the rest, just vh or vw.

(setting all 3 'icon parts' at 1em makes it perfect.)

@Grumm first, never set width and height of the pictures explicitly in CSS. Never set width and height in CSS, period. Use min-* and max-*.

Make sure width and height attributes are set in HTML.

Apply the following code:

img {

max-width: 100%;

height: auto;

}

Then, the image will be fully responsive, and will never exceed its actual size.

Setting image dimensions in EM is justified if you have everything else set in EM as well. First, you will be able to scale down any UI element, even a whole section, by setting its root element font-size to 0.9em, or any other value. Everything will be scaled up or down proportionally.

Second, if your user changed their browser settings and altered default font-size to, say, 18px instead of 16, your website will respond perfectly.

@kiki I agree with those practices.

I just went with whatever devrant is using.

Their logo class looks like this btw :

https://imgur.com/uglCLVf

@Grumm to be honest with you, devRant web UI CSS is almost offensive to me. But your fix works

Conspiracy theory: that is there on purpose to instigate a legitimate dev RANT

@melezorus34 I’m sorry I called your monitor bad. Nothing is wrong with having a cheap monitor, either if you’re okay with its quality or have no choice because of money constraints or other circumstances

@kiki explicit LGTM - as long as it's a presentational element that doesn't exceed 320px in both dimensions.

I’ve definitely noticed the logo crop. Never looked into why — I don’t use the website like ever.

Anyway, totally agree with @kiki. That’s how you CSS! 😁

@uNrEaL-jAsE it is to reserve the space in html. So that you have less layout shifting.

@uNrEaL-jAsE because if you don’t, pictures will have zero height until they load, and layout will jump around