Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 5, 2016 at 12:16 am #593588
    Frankmen

    Hallo,

    ist es möglich die eingestellten Border Radien an Layout Elementen in der responsive Ansicht zu deaktivieren ?

    Ich nutze an Layout Elementen im Main Content den Border Radius – 10px.
    Wenn ich nun zwei 1/2 Layout Elemente nebeneinander habe setze ich beim linken Element die Einstellung:
    Top-Left-Radius : 10px
    Bottom-Left-Radius : 10px
    Top-Right-Radius : 0px
    Bottom-Right-Radius : 0px

    und beim rechten Element:
    Top-Left-Radius : 0px
    Bottom-Left-Radius : 0px
    Top-Right-Radius : 10px
    Bottom-Right-Radius : 10px

    sieht in normaler Browser Ansicht auch gut aus.
    Bei der responsive Ansicht werden nun die Elemente nicht mehr neben sondern übereinander Angezeigt und das passt nun natürlich nicht mehr mit den runden Ecken.

    Deshalb würde ich die Radien gerne nur in der normalen Browser Ansicht haben …

    March 7, 2016 at 2:43 pm #594325
    Andy

    Hey Frankmen!

    du kannst media queries nutzen, um deinen Code ausschließlich für bestimmte Browser Größen zu verwenden. Zum Beispiel so hier: 

    @media screen size and (min-width: 720px) and (max-width: 1200px) {
DEIN CODE HIER
}

    Für weitere Informationen zu media queries: css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Gruß!
    Andy

    March 7, 2016 at 5:03 pm #594434
    Frankmen

    Hallo Andy,

    danke für die Info, das mit dem:
    @media screen size and (min-width: 720px) and (max-width: 1200px)
    war mir schon bekannt und dich nutze diese Funktion auch schon anderweitig per Quick-CSS

    Was mir fehlt ist halt der Code danach um die “Border Radius” Einstellungen zu löschen …
    Könntest Du mir da evtl. noch einen Tip geben ??

    Gruß
    Frankmen

    March 7, 2016 at 5:52 pm #594489
    Andy

    Hey!

    bitte mal einen präzisen Link wo wir die Border Radius Einstellungen sehen können, die du gelöscht haben möchtest. Wir müssen die Elemente inspizieren können.

    Gruß,
    Andy

    March 8, 2016 at 12:04 pm #594956
    Frankmen

    Hi Andy,

    hier mal ein Beispiel:
    In der Browser Ansicht super, in responsive Ansicht stören die abgerundeten Ecken da sie nicht mehr am richtigen Platz sitzen.

    March 8, 2016 at 7:53 pm #595144
    Andy

    Hi!

    versuch es mit diesem Code im Quick CSS Feld:

    @media only screen and (max-width: 767px) {
.flex_column.av_one_full.no_margin.flex_column_table_cell.av-equal-height-column.av-align-top.first.avia-builder-el-2.el_before_av_three_fourth.avia-builder-el-first.hintergrund {
border-radius: 0px !important;
}
.flex_column.av_three_fourth.no_margin.flex_column_table_cell.av-equal-height-column.av-align-top.first.avia-builder-el-4.el_after_av_one_full.el_before_av_one_fourth.hintergrund.column-top-margin {
border-radius: 0px !important;
}}

    Gruß!
    Andy

    March 8, 2016 at 11:55 pm #595239
    Frankmen

    Hallo Andy,

    schaut vom Prinzip her schon mal ganz gut aus, die beiden oberen Border Radien und der untern rechts sind so wie ich es mir vorgestellt habe nur der unten links bleibt auch in der responsive Ansicht unverändert (also rund) ??

    Dann nochmal die Frage warum wirkt der Code nur auf die eine Seite ?
    Könntest Du mir evtl. mal kurz beschreiben das da so passiert.
    Ich hab mal die Border Radius Einstellung auf anderen Seiten eingestellt aber dort verändert der Code gar nichts …

    Gruß
    Frankmen

    March 9, 2016 at 12:08 pm #595495
    Andy

    Hi!

    dann verwende diesen Code stattdessen: 

    @media only screen and (max-width: 767px) {
.flex_column {
border-radius: 0px !important;
}}

    Gruß,
    Andy

    March 9, 2016 at 12:39 pm #595519
    Frankmen

    Hi Andy,
    super funzt PERFEKT !!!

    Vielen Dank
    Frankmen

    March 9, 2016 at 4:04 pm #595624
    Andy

    Hey!

    das freut mich. Gerne ein neues Ticket für ein weiteres Problem bezüglich des Themes.

    Gruß,
    Andy

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Border Radius an Layout Elementen in responsive Ansicht deaktivieren’ is closed to new replies.