Hallo
Ich bin mir bewusst das weniger eine ZP Forum frage ist, aber da ich den Support und die Community hier schätze und sehr zufrieden bin stelle ich diese frage trotzdem
Ich habe das Widget Ghost Button von ThM und wollte da in der CSS Datei Breakpoints für das responisve Layout einfügen wie z.B: dieser breakpoint:
Code
/* Smartphones (portrait and landscape) ----------- */ @media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) { /* Styles */ }Doch leider füge ich das anscheinend an der falschen Stelle ein oder irgendwas klappt nicht. Wo muss ich diesen Code genau einfügen?
Code
<$= system.partial("article-begin.html") @@@20e2330f-eb2c-4760-9be0-810a465c7f01@@@
gt;
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Rosario:400,700' rel='stylesheet' type='text/css'>
<style>
.ghost-button {
display: inline-block;
width: <$= article.value("ghost_button_width") @@@20e2330f-eb2c-4760-9be0-810a465c7f01@@@
gt;px;
padding: <$= article.value("ghost_button_padding") @@@20e2330f-eb2c-4760-9be0-810a465c7f01@@@
gt;px;
color: <$= article.value("ghost_button_text_color") @@@20e2330f-eb2c-4760-9be0-810a465c7f01@@@
gt;;
border: <$= article.value("ghost_button_border_width") @@@20e2330f-eb2c-4760-9be0-810a465c7f01@@@
gt;px solid <$= article.value("ghost_button_border_color") @@@20e2330f-eb2c-4760-9be0-810a465c7f01@@@
gt;;
border-radius: <$= article.value("ghost_button_border_radius") @@@20e2330f-eb2c-4760-9be0-810a465c7f01@@@
gt;px;
text-align: center;
outline: none;
text-decoration: none;
margin-top: 10px;
margin-bottom: 10px;
}
.ghost-button:hover,
.ghost-button:active {
background-color: <$= article.value("ghost_button_hover_color") @@@20e2330f-eb2c-4760-9be0-810a465c7f01@@@
gt;;
color: <$= article.value("ghost_button_hover_text_color") @@@20e2330f-eb2c-4760-9be0-810a465c7f01@@@
gt;;
text-decoration: none;
}
</style>
<p style="text-align:<$= article.value("ghost_button_align") @@@20e2330f-eb2c-4760-9be0-810a465c7f01@@@
gt;">
<a <$= system.partial("zplink-expanded.html") @@@20e2330f-eb2c-4760-9be0-810a465c7f01@@@
gt; class="ghost-button">
<span><i class="<$= article.value("ghost_button_icon") @@@20e2330f-eb2c-4760-9be0-810a465c7f01@@@
gt;"></i> <$= article.value("ghost_button_text") @@@20e2330f-eb2c-4760-9be0-810a465c7f01@@@
gt;</span>
</a>
</p>
<$= system.partial("article-end.html") @@@20e2330f-eb2c-4760-9be0-810a465c7f01@@@
gt;
Vielen Dank für die Hilfe