Artykuły powiązane (dodawane ręcznie) – Shoper

Pod opisem artykułu blogowego dodajemy poniższy kod:

<h4 class="blog-additional-hh">Polecane artykuły:</h4>
<div class="blog-additional-section">
	<div>
		<img src="https://www.smart-zegarki.pl/userdata/public/news/images/17.jpg" alt="">
		<p><a href="https://www.smart-zegarki.pl/DT2-recenzja">Smartwatch damski z funkcją rozmów</a>               </p>
	</div>
	<div>
		<img src="https://www.smart-zegarki.pl/userdata/public/news/images/15.jpg" alt="">
		<p><a href="https://www.smart-zegarki.pl/pl/n/15">Jaki smartwatch do 300zł wybrać?</a></p>
	</div>
	<div>
		<img src="https://www.smart-zegarki.pl/userdata/public/assets//G02.png" alt="">
		<p><a href="https://www.smart-zegarki.pl/sluchawki-bluetooth-jakie-wybrac">Jakie słuchawki bezprzewodowe wybrać?</a></p>
	</div>
</div>

Uwaga: w <img> zmieniamy zdjęcie naszego wpisu, w <a> – link prowadzący do naszego wpisu oraz temat artykułu

Style CSS:

.blog-additional-hh {
	font-size: 1.8em;
}

.blog-additional-section {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       align-items: flex-start;
       gap: 20px;
}

.blog-additional-section div {
	width: 30%;
}


#box_article .article-content img {
	height: 100%;
	width: 100%;
}

.blog-additional-section p {
	text-align: center;
        font-size: 12pt;
        margin-top: 10px;
}

@media (max-width: 991px) {
	.blog-additional-section div {
		width: 60%;
	}	
}