Viewing 27 posts - 1 through 27 (of 27 total)
  • Author
    Posts
  • #755620

    Hey,

    so on Desktop, I have 1/5th columns next to each other, while I want to show 2 next to each other on mobile.
    So I modified the column width according to what I’ve found here, and I have the problem that this creates
    ’empty’ boxes, the elements don’t jump into the right order.

    The code:

    @media only screen and (max-width: 767px) {
    
    .av_one_fifth {
    width: 48%!important;
    padding-left: 1%;
    padding-right: 1%;
    }
    }

    See: box issue

    I tried fiddling around with the paddings and the width, but can’t get them aligned properly.
    Maybe someone has a solution for this.

    Cheers

    #755650

    Hey alexandervellguth,
    When I tested your code it made the empty box at the end, can you please include a admin login in the private content area so we can take a closer look.

    Best regards,
    Mike

    #755894

    Sure, here you go:

    #757687

    Any news on this?
    I put the credentials in the answer below.

    #759006

    Hi,

    is this a second thread about the same topic you already talked about? if yes then please avoid that, as we are already very busy here in this forum.

    However you could try to find a solution which you hide on desktop and show on mobile only. I would try to work with a Grid Row element instead.

    Best regards,
    Andy

    #759701

    Hi Andy,

    unfortunately using the grid row element is not an option since we already created more than 60 pages using this layout. We now changed from 5 to 4 columns in a row. On mobile we still have two in a row. This works in 95% of the cases. However on some links (e.g. see link in private content) the above mentioned empty boxes still appear. Do you have any idea why?

    Thank you again.

    #760067

    Hi,

    it will be difficult, especially as you have so many different pages, but try this code:

    @media only screen and (max-width: 767px) {
    .flex_column.av_one_fourth.flex_column_div.av-zero-column-padding.avia-builder-el-33.el_after_av_one_fourth.el_before_av_one_fourth.column-top-margin {
    float: right;
    }
    .flex_column.av_one_fourth.flex_column_div.av-zero-column-padding.avia-builder-el-57.el_after_av_one_fourth.el_before_av_one_fourth.column-top-margin {
    float: right;
    }}

    Best regards,
    Andy

    #760676

    Hello Andy,

    thank you for your help. Your code has partially solved the problem. However, the affected boxes have switched from left to right. Since the boxes are sorted alphabetically, it is crucial to keep the original order.

    What is more, the boxes are not aligned on the same height. (See the provided links) On the screen size of an iphone 5 there are still white boxes. (See link in private content)

    Thank you again.

    #760957

    Hi,

    try this code for iPhone 5:

    @media only screen 
      and (min-width: 320px) 
      and (max-width: 568px) {
    .flex_column.av_one_fourth.flex_column_div.av-zero-column-padding.avia-builder-el-21.el_after_av_one_fourth.el_before_av_one_fourth.column-top-margin {
    float: right;
    margin-top: 20px !important;
    }}

    Unfortunately we can’t help you with the alphabetically order. This would be a job for a freelance developer.

    Best regards,
    Andy

    #760994

    Hi Andy,

    unfortunately this has not solved the problem. Not even if i dont consider the alphabetically order. Some boxes are not aligned. Some boxes still have a white box. So I kindly ask you to look into this issue again.

    Best regards,

    Alex

    #761014

    what is the thing you like to have? 2 2 1 or maybe 1 2 2 (1 in center above)
    the thing is here to work with nth:child options and clearings

    is there a link for a participant as me?

    #761026

    Hey Andy,

    I know have even used a grid row (as recommended by you) and it still is not working. It is getting really frustrating, since this only can be a bug or a problem caused by the template itself.

    BR.

    Alex

    #761038

    https://webers-testseite.de/kokon/fifth-columns/

    i only can help best if i see your page

    these are 1/5th columns with image and text under it. The columns are from individual height and with no space between

    #761055

    http://ahlers-vogel1.x-production.com/rechtsanwaelte/bremen/ this is one of the pages we are struggling with. We want to have two Images per row on mobile view. However, on some rows there is only displayed one image. Maybe you can help.

    #761056

    hast du eine seite wo auch 5 sind?

    #761058

    ach schon mal ne Lösung für die Footer Problematik (auch hier sind es ja 5 Säulen) du hast dort die Schrift verkleinert – brauchst du so garnicht.
    Du kannst aber auch hier auf 2 2 1 gehen
    du siehst die media querries pixelwerte kannst du ja dann deinen Bedürfnissen anpassen.

    @media only screen and (min-width: 480px) and (max-width: 989px) {
    #footer .av_one_fifth {
        margin-left: 0% !important;
        width: 50% !important;
    }
    
    .responsive #footer div .av_one_fifth:nth-child(2n+1) {
        clear: both !important;
    }
    }
    #761062

    Man hat uns gesagt, dass die Problematik nicht auftreten würde, wenn wir statt 5 nur 4 in einer Reihe haben. Daraufhin habe ich alle Seiten auf 4 Spalten abgeändert.

    Danke schon einmal für die Hilfe bei der Footer Problematik

    #761063

    bei 5 er columns geht es ähnlich
    wie gesagt ich habe mal auf der Testseite das so angelegt : 1/5 dann individuelle Höhe (sonst ist das auf display: table-cell) und keine Zwischenräume (die lege ich selbst fest.

    dann :

    #top .no_margin.av_one_fifth {
        width: 18%;
    }
    #top div .no_margin {
        margin-left: 2% !important;
        margin-top: 0;
    }
    
    @media only screen and (min-width: 480px) and (max-width: 990px) {
    #top .no_margin.av_one_fifth {
        clear: none !important;
        width: 48% !important;
    }
    #top .no_margin.av_one_fifth:nth-child(2n+1) {
        clear: both !important;
    }
    }

    mit den Abständen kannst du ja was spielen.
    wichtig ist eben: kein clearing über die columns bis auf (2n+1)

    das ist noch nicht ganz perfekt, weil da jetzt links rechts ein anderer Abstand ist.
    man könnte dann für #top .no_margin.av_one_fifth.first was setzen etc. – aber so sieht es auch schon besser aus

    #761067

    Lieben Dank!!!

    Ich habe gerade nochmal eine Seite erstellt mit 5 Spalten. Auf dem Handy wird mir aber leider nur eine Spalte angezeigt…

    Hast du eine Idee woran das liegen könnte?

    Liebe Grüße

    #761223

    hast du einen direkt link dahin – ich finde die 5 spalter nicht

    ich hatte ganz bewußt auf diese Spanne gestellt. Wenn es zu klein wird um gesehen zu werden ist es auch doof oder?
    480px ist die Handy Querformatmarke.
    Wenn du auch auf dem Handy im Hochformat das haben willst musst du die untere Marke auf 320px stellen
    oder gar noch kleiner einstellen – ein Link wäre genial, weil dann kann man optimieren.
    ZB würde ich dann das padding links/rechts wohl verringern Mobilen Fall ( du hast das generell auf 15% – finde ich recht üppig bei 320px breite.

    und btw. wenn du von 4 auf 5 Spalten stellst musst du jedesmal leider auf die erste Spalte gehen um dort die Parameter neu einzustellen.
    (individuelle Höhe, und kein Platz zwischen den Spalten – denn ich glaube per default ist das auf equal height und space gestellt)

    #761271

    Ja es sollen aber unebdingt zwei spalten im handy hochformat sein. Hatte die Marke jetzt auch auf 320 px herabgesetzt, aber leider springt der trotzdem nicht um. (Hier der Link: http://ahlers-vogel1.x-production.com/7751-2/)

    Das Padding habe ich soweit ich weiß nur für die eigens erstellte css klasse padding auf 15% gestellt. damit die Bilder auf dem Desktop nicht so groß sind. (Die Größe der Bilder bei 5 Bildern in einer Reihe hat meinem Kunden gefallen, allerdings sind diese durch den Umstieg auf 4 in einer Reihe natürlich deutlich größer geworden. Deswegen habe ich für die 8 Seiten wo keine Sidebar vorhanden ist die Bilder in eine Farbsektion gepackt und das Padding hierfür auf 15% gestellt. (Allerdings nur bei min-width 768px)

    Das Padding hatte ich eig schon für die Mobile Ansicht verkleinert.

    Nochmals Danke

    #761272

    Was meinst du mit der Umstellung der Parameter in der ersten Spalte? Was genau muss ich da einstellen?

    Und wenn die Problematik einfacher mit 4 Spalten zu beheben ist, würde ich ohnehin sehr gerne bei 4 Spalten bleiben und nicht wieder alle Seiten auf 5 Spalten umstellen.

    #761287

    immer genau lesen – ich war ja von den Einstellung individuelle höhe und kein Abstand ausgegangen – bei dir ist es jetzt:

    #top .av_one_fifth {
        width: 18%;
    }
    
    @media only screen and (min-width: 480px) and (max-width: 990px) {
    #top .av_one_fifth {
        clear: none !important;
        width: 48% !important;
    }
    #top .av_one_fifth:nth-child(2n+1) {
        clear: both !important;
    }
    }

    die no-margin anweisung ist auch dann hinfällig gewesen weil du ein top-margin definiertest.

    was ich mit Einstellungen meine: die erste 1/5 tell Spalte bestimmt das Verhalten der 4 nachfolgenden. Wenn du jetzt von einem 4 Spalter auf einen 5 Spalter wechselst, springen die 1. Elemente der folgenden Reihen als 5. Element eine Reihe höher. Und das ursprünglich 2. 1/5tel springt auf den ersten Platz. Diese Columns sind aber per default auf equal height und space eingestellt. Daher musst du beim Ändern auf 5 Spalter alle ersten Spalten die Einstellungen dort prüfen.

    #761296

    bitte nichts mehr ändern: und folgenden code einfügen (den rest bitte löschen)

    @media only screen and (min-width: 320px) and (max-width: 990px) {
    body .column-top-margin {
        margin-top: 0;
    }
    
    div .av_one_fifth {
        margin-left: 2% !important;
        width: 44%;
      clear: none !important
    }
    
    div .av_one_fifth:nth-child(2n+1) {
        clear: both !important;
    }
    }
    • This reply was modified 7 years, 8 months ago by Guenni007.
    #761327

    Ok. Habe die ersten beiden Spalten auf Equal Height und no margin gestellt. Sieht jetzt schon besser aus. Allerdings sind auf dem Handy derzeit immer noch lediglich einer in einer Zeile.

    #761384

    ok – so geht es ja jetzt

    PPS:

    setze mal in quick css:

    #mobile-advanced {
        background-image: url("http://ahlers-vogel1.x-production.com/wp-content/uploads/2016/10/Ahlers-Vogel_Logo.png");
        background-position: left top;
        background-repeat: no-repeat;
        background-size: 40% auto;
        padding: 10% 0 !important;
    }

    und schau dann in das mobile menu rein
    eventuell nimmt man da auf Grund deines grauen Hintergrundes ein anderes Logo ( ganz Weiss vielleicht oder composite)

    your welcome

    #762458

    @Guenni007
    Besten Dank für deine Unterstützung!

    Liebe Grüße,
    Andy

Viewing 27 posts - 1 through 27 (of 27 total)
  • You must be logged in to reply to this topic.