andrewMacmurray
commented
7 years ago @eghale
a) classes for each images you mentioned are here: https://github.com/TechforgoodCAST/cast-website/blob/master/source/layouts/cast/_what_we_do.html.haml#L5
The padding-4 pa4 is what's making it so big, you could try using pv3 or pv2 and ph4 (the v is for vertical and h for horizontal), maybe have a play around with those.
You can find all the tachyons classes here: http://tachyons.io/docs/table-of-styles/
Do you use atom? If you do you can do shift + command + f with w-100 w-33-m fl pa4 to find where the class is
the 64px is to do with the top of the site (it's an offset for the page from the fixed navbar) would be kind of pointless to make a class just for that (as it's a very specific case and doesn't change on mobile) so we decided to inline that one
b) as far as the "consistent" image size this may take a bit more thought (it's not as simple as just dropping some images in and adding classes as the images each have slightly different dimensions). I think taking off the transparent background would definitely help
eghale
@ivanmauricio @andrewMacmurray Need some of your Tachyons knowledge here please...
Currently on staging site:
I can't seem to find a way to
a) get rid of the huge amount of padding-top on these boxes (is that something to do with #main{style: 'padding-top: 64px'} ? why is that inline? why can I not find the div class="w-100 w-33-m fl pa4" that I see around each box and can change in inspect element, anywhere in the actual code? If this is a Tachyons thing, I don't think it's very user-friendly!)
b) make the images roughly the same size as each other. I saw your work-around for the smallImg class, but I don't think it's really working for me - would it just be easier to edit out all the transparent background behind each image and then set them all to the same size? Think that may be what's causing the difficulty at the moment.
Thanks!