Display Digital work

[adam]

Hey guys

I am trying to set up an easier way of displaying digital work although i am not sure its as easier as I thought with lay theme.

Ideally, I would like to create a few classes I can apply to specific images and display them with a solid colored background. I was going to do a browser, tablet and mobile. A great example of what I am trying to achieve is something like Area 17. https://area17.com/work/the-new-school-website

I understand its a little bit of additional css to get it working just not sure its possible with how the gridder is built, as I seem to run into alignment issues.

Any help would be much appreciated!

Thanks

[mariusjopen]

Hi @adam
you can do this for example by giving each image a background color and a padding.
Add this to your custom CSS section.

.grid img {
    padding: 20%;
    background: lightgrey;
}

It is always good to know the basics of CSS. At Codeacademy you can make a free beginner course.

I hope that helps!

Best!

Marius

[adam]

@mariusjopen said in Display Digital work:

padding: 20%;
background: lightgrey;

Hi Marius

Thanks for the reply. What if I don't want this to happen to all my images just a select few.

Also when I did add that code you suggested it pushed my images to be larger then the layout and off the page?

[mariusjopen]

HI @adam
by right clicking on an image you can give it a class. Then you can apply the CSS only to that class.

Yes. Of course. The image with get bigger because of the "frame".

You need to work with that – or you make the frame as a part of the image.

The solution I proposed is more a workaround – because this is not a very common thing to do.

Best!

Marius