Skip to main content

CSS overrides

The way Diffy takes screenshots is we open a page in a browser with a really large height (10.000+ pixels). Usually it works just fine, but if site has some elements that has CSS height property set in % or vh units these elements will get stretched.

We have came up with a workaround for this -- you can override CSS of your site prior to taking the screenshot.

custom CSS overrides

For that simply find the elements that are stretched and use the same selectors to set their height in pixels.

find vh units inspector

 

So then you can use a CSS rule to fix the height of the block.

.app-store-block {
  height: 200px;
}

Of course not every case will be that simple. There are situations when CSS selectors are way more complex and include @media queries. Even worse, in  some cases the height is set by javascript, in those extreme situations you can write custom javascript to override the height properties.