Thanks for all suggestions. I have tried to do the changes you suggested and it helped a little. Anyway I still cant figure out how the CSS code should look like to mach the other boxes. Hope someone can advice. The updated codes are below. The test website can be founded here: https://jo5.dykkerhulen.dk/index.php
Php code:CSS code:
Php code:
Code:
<?php if ($this->countModules('footer-top-box') || $this->countModules('footer-bottom-box')) : ?><footer class="footer-container"> <?php if($this->countModules('footer-top-box')) : ?> <div class="footer-top-box"> <jdoc:include type="modules" name="footer-top-box" style="card" /> </div> <?php endif; ?> <?php if($this->countModules('footer-bottom-box')) : ?> <div class="footer-bottom-box"> <jdoc:include type="modules" name="footer-bottom-box" style="card" /> </div> <?php endif; ?></footer><?php endif; ?>Code:
@charset "UTF-8";:root, [data-bs-theme="light"] {/* Generelle footer-stilarter */.footer-container { background-color: #f8f9fa; /* Lys grå baggrund */ padding: 20px; color: #333; /* Mørk tekstfarve */}/* Stil for footer-top-box */.footer-top-box { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 20px;}/* Stil for individuelle moduler i footer-top-box */.footer-top-box .card { flex: 1 1 calc(25% - 20px); /* Juster bredden efter behov */ margin: 10px; background-color: #fff; /* Hvid baggrund for moduler */ border: 1px solid #ddd; /* Lys grå kant */ border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 15px;}/* Stil for footer-bottom-box */.footer-bottom-box { text-align: center; padding: 10px; background-color: #e9ecef; /* Lysere grå baggrund */ border-top: 1px solid #ddd;}/* Responsiv tilpasning */@media (max-width: 768px) { .footer-top-box .card { flex: 1 1 calc(50% - 20px); /* To kolonner på tablets */ }}@media (max-width: 480px) { .footer-top-box .card { flex: 1 1 100%; /* En kolonne på mobil */ }}Statistics: Posted by gerner — Sat Jan 11, 2025 3:17 pm
