Hallo Zusammen,
ich probiere gerade bisschen rum. Ich habe mir eine Hinweiß-Box erstellt. In dieser Hinweiß-Box benutze ich folgenden HTML-Code:
Code
<div class="boxpn">
<div class="ribbon"><span>Blizzard</span></div>
<br>
<div class="pnhinweis">
<span class="labelpatchnotes labelpatchnotes-ver">WoW-Patchnotes</span><br>
<img class="linkpn" src="images/favicon-16x16.png"> <a href="https://kotoc.de/index.php?patchnotes-732/">WoW Legion Patch 7.3.2</a>
<br>
<img class="linkpn" src="images/favicon-16x16.png"> <a href="https://kotoc.de/index.php?hotfix-24-okt/">Hotfix-Tracker</a>
<br>
</div>
<div class="pnhinweis1">
<span class="labelpatchnotes labelpatchnotes-ver">M+ Affixe | Diese Woche 01/11/17</span>
<br>
<a href="http://de.wowhead.com/affix=7/anstachelnd" id="EU-mythicaffix-1" class="icontiny">Anstachelnd</a><br>
<a href="http://de.wowhead.com/affix=2/launisch" id="EU-mythicaffix-2" class="icontiny">Launisch</a><br>
<a href="http://de.wowhead.com/affix=10/verstarkt" id="EU-mythicaffix-3" class="icontiny">Verstärkt</a>
<br>
</div>
</div>mit diesem CSS-Code:
Code
/* Patchnotes */
.labelpatchnotes {
display: inline;
padding: 0.2em 0.6em 0.3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25em;
background-color: #6969ff;
}
.labelpatchnotes-patch {
background-color: #2c8fed;
}
.labelpatchnotes-neu {
background-color: #b22222;
}
.labelpatchnotes-ver {
background-color: #558936;
}
.patchnotes {
background-color: rgba(245, 245, 245, 1);
margin: 20px 0;
color: white;
padding: 15px;
border-radius: 5px 5px 5px 5px;
}
.boxpn {
position: relative;
width: 100%;
min-height: 80px;
height: 110px;
background-color: rgba(245, 245, 245, 1);
margin-top: 13px;
border-radius: 3px;
}
.pnhinweis {
margin-left: 75px;
float: left;
}
.pnhinweis1 {
margin-left: 25px;
float: left;
}
.ribbon {
position: absolute;
left: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbon span {
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#2D98F0 0%, #3291FF 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; left: -21px;
}
.ribbon span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #3291FF;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #3291FF;
}
.ribbon span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #3291FF;
border-bottom: 3px solid transparent;
border-top: 3px solid #3291FF;
}Jetzt zu meiner Frage :), wie passe ich die Mobile Ansicht an? Habt ihr Ansätze wo ich mich belesen kann, dass wäre klasse.
Gruß Mark
jetzt klappt das auch mit der Mobilen-Ansicht