Im new to CSS codes so I need a little advice. I have add some extra boxes to the bottom of my site, but I can't get them look like the rest of the boxes on the page, that is a part of the template cassiopeia on joomla 5.
Below is a screenshot of the website in both normal and debug mode and below the photos the CSS codes I have used. Maybe someone can advise me on the CSS codes so the boxes will look like the rest of the page.
![Image]()
![Image]()
Editing file "/media/templates/site/cassiopeia/css/user.css" in template "cassiopeia":
Below is a screenshot of the website in both normal and debug mode and below the photos the CSS codes I have used. Maybe someone can advise me on the CSS codes so the boxes will look like the rest of the page.
Editing file "/media/templates/site/cassiopeia/css/user.css" in template "cassiopeia":
Code:
@charset "UTF-8";:root, [data-bs-theme="light"] {/* Fælles styling for alle footer-bokse for at matche 'bottom-a' stilen */.footer-container { display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; padding: 20px !important; box-sizing: border-box !important; width: 100% !important; /* Sørger for at containeren fylder hele bredden */}.footer-top-box-1,.footer-top-box-2,.footer-top-box-3 { flex: 1 1 30% !important; /* Sørger for, at boksene står ved siden af hinanden */ padding: 10px !important; background-color: #fff !important; /* Lys grå baggrund */ border: 1px solid #ccc !important; /* Matchende kant */ box-sizing: border-box !important; margin-bottom: 10px !important; /* Afstand mellem rækker */ margin-left: -1px !important; /* Kompenserer for border */ margin-right: -1px !important; /* Kompenserer for border */}.footer-bottom-box { width: 100% !important; padding: 10px !important; background-color: #fff !important; /* Lys grå baggrund */ border: 1px solid #ccc !important; /* Matchende kant */ box-sizing: border-box !important; text-align: center !important; margin-bottom: 10px !important; /* Afstand under bundboksen */}/* Responsiv tilpasning */@media (max-width: 768px) { .footer-top-box-1, .footer-top-box-2, .footer-top-box-3 { flex: 1 1 100% !important; /* Stabler vertikalt på mindre skærme */ margin-left: 0 !important; /* Fjern margin på venstre side */ margin-right: 0 !important; /* Fjern margin på højre side */ }}Statistics: Posted by gerner — Wed Jan 08, 2025 1:56 pm