Output Images left and right Position

Kirby 2 Questions 🤔
1

Hello Kirby Friends, i’m working on a small Portfolio at this Moment. This is How it looks.

380bc022a0844a8a8ca3514bdc160874.png1897×826 365 KB

i changed the browser size that you can see it better :slight_smile:

What i want to do is to output the images in a left and also in a right Position.
i already try to find a solution, but all my ideas was wrong :confused:
do you have any ideas?

thats my portfolio.php snippet (its include to the default template)

<div id="main">
    <?php foreach ($page->items()->toStructure() as $item): ?>
        <article class="thumb">
            <a href="<?php echo $page->image($item->item_image())->url() ?>" class="image"><img src="<?php echo $page->image($item->item_thumb())->url() ?>" alt="" /></a>
            <h2><?php echo $item->item_title()->html() ?></h2>
            <?php echo $item->item_text()->kirbytext() ?>
        </article>
    <?php endforeach; ?>
</div>

and this is my main.css thumbnail Part

/* Thumbnails */

	.thumbnails {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: row;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		position: relative;
		margin: 0 0 2em -2em;
	}

		.thumbnails a {
			-moz-transition: all 0.2s ease;
			-webkit-transition: all 0.2s ease;
			-ms-transition: all 0.2s ease;
			transition: all 0.2s ease;
			border-bottom: none;
			display: block;
			width: 100%;
			margin: 0 0 2em 0;
			text-align: center;
			border-radius: 4px;
			box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
			background-color: rgba(255, 255, 255, 0.075);
			cursor: pointer;
			outline: 0;
			overflow: hidden;
		}

			.thumbnails a img {
				display: block;
				width: 100%;
				border-top-left-radius: 4px;
				border-top-right-radius: 4px;
			}

			.thumbnails a h3 {
				margin: 1em;
			}

			.thumbnails a:hover {
				background-color: rgba(255, 255, 255, 0.25);
				box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 0.5em 0 #FF6382;
			}

		.thumbnails > div {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			width: calc(100% / 3);
			padding-left: 2em;
		}

			.thumbnails > div > :last-child {
				margin-bottom: 0;
			}

		@media screen and (max-width: 1280px) {

			.thumbnails {
				margin: 0 0 2em -1.5em;
			}

				.thumbnails a {
					margin: 0 0 1.5em 0;
				}

				.thumbnails > div {
					padding-left: 1.5em;
				}

		}

		@media screen and (max-width: 980px) {

			.thumbnails h3 {
				font-size: 0.8em;
			}

		}

		@media screen and (max-width: 480px) {

			.thumbnails {
				display: block;
			}

				.thumbnails a {
					margin: 0 0 2em 0 !important;
				}

				.thumbnails > div {
					display: block;
					width: 100%;
				}

					.thumbnails > div:last-child > :last-child {
						margin-bottom: 0 !important;
					}

				.thumbnails h3 {
					font-size: 1em;
				}

		}

Simon

2

How does the CSS relate to your code snippet? I can’t see any thumbnail class in your code? Should either thumbnail changed to thumb or the other way round?

3

portfolio.png1897×826 447 KB

i want to change it like that.

4

I understand that, but as I said, you use a class in your CSS, namely .thumbnails, that is non-existent in your code snippet.

5

i forgot to rename thumb in thumbnails