Hallo liebe Community,
Zurzeit arbeite ich an meinem ersten Joomla Template, da ich mich bisher nur mit statischen HTML Seiten beschäftigt muss es ja so kommen, dass gleich die ersten Probleme auftreten.
Also um euch einen kurzen Einblick zu verschaffen, auf meiner Startseite befindet sich eine Seitensektion in der Öffnungszeiten eingetragen werden können und daneben ist der main-content der Seite. Im main-content werden die neusten Artikel untereinander angezeigt. In einem dieser Artikel befindet sich ein Bild, hier liegt das Problem, beim kleiner skalieren der Seite z. B. für Smartphones wird mir das Bild nicht mit skaliert sondern einfach abgeschnitten.
forum.joomla.de/core/attachment/2148/forum.joomla.de/core/attachment/2149/
Ich hoffe ich konnte das Problem mit diesen Bildern verdeutlichen.
Hier noch mein HTML und CSS Code (in rot hinterlegt die wichtigen Stellen)
<body>
<header>
<div class="container">
<div class="headerlogo">
<jdoc:include type="modules" name="logo-nav"/>
</div>
<nav>
<jdoc:include type="modules" name="top-nav"/>
</nav>
</div>
</header>
<div class="container">
<aside>
<jdoc:include type="modules" name="aside" style="XHTML" />
</aside>
<section id="content">
<jdoc:include type="message" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="main-content" style="XHTML" />
</section>
</div>
Alles anzeigen
.active{
font-weight: bold;
}
.page-header {
text-align: center;
}
#content img{
max-width: 100%;
height: auto;
}
body{
font-family: sans-serif;
font-size: 17px;
padding: 0px;
margin:0px;
background-color: white;
}
header{
background-color:lightgrey;
color:red;
padding-top:30px;
min-height: 70px;
border-top:red solid 3px;
}
header nav{
float:right;
padding-top: 10px;
}
header a{
text-decoration: none;
color: red;
text-transform: uppercase;
}
header ul{
margin: 0;
padding: 0;
}
header li{
display: inline;
padding: 0 20px 0 20px;
}
.headerlogo{
float:left;
font-size: 28px;
font-weight: bold;
}
section{
width: 80%;
float:left;
}
section p {
padding-right: 5%;
padding-left: 5%;
}
aside{
width:20%;
float: left;
}
footer{
background-color: lightgrey;
color: red;
border-bottom: 3px red solid;
padding: 20px 0 20px 0;
}
footer a{
float: left;
margin: 0;
text-decoration: none;
color: red;
}
footer li{
display: inline;
}
footer ul{
margin: 0;
padding: 0;
}
footer .contact{
float: right;
margin: 0;
padding: 0;
}
footer p{
float: none;
padding-top: 60px;
}
.container{
width: 90%;
margin:auto;
overflow:hidden;
}
@media(max-width: 480px){
header nav,
.headerlogo a,
header li,
footer a,
footer .contact,
footer p{
float: none;
text-align: center;
width: 100%;
display: flex;
justify-content: center;
padding:0;
margin:0;
}
header{
padding-bottom: 20px;
}
.container{
width:85%;
float: none;
margin: auto;
}
section{
float:none;
width: 100%;
}
.page-header {
text-align: center;
}
aside{
float:none;
width:100%;
}
footer a{
display: flex;
text-align: center;
justify-content: center;
padding-bottom: 10px;
}
footer p{
padding-top: 20px;
}
}
Alles anzeigen
Da diese Methode, zur Skalierung der Bilder, bei statischen HTML Seiten immer funktioniert hat bin ich ratlos
Deshalb würde ich mich sehr über eure Lösungsvorschläge freuen.
Schöne Grüße
Alex