-
AuthorPosts
-
March 4, 2017 at 4:57 pm #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:
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
March 4, 2017 at 6:46 pm #755650Hey 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,
MikeMarch 5, 2017 at 11:43 am #755894Sure, here you go:
March 8, 2017 at 11:02 am #757687Any news on this?
I put the credentials in the answer below.March 10, 2017 at 4:45 pm #759006Hi,
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,
AndyMarch 12, 2017 at 9:21 pm #759701Hi 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.
March 13, 2017 at 4:38 pm #760067Hi,
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,
AndyMarch 14, 2017 at 12:54 pm #760676Hello 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.
March 14, 2017 at 8:22 pm #760957Hi,
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,
AndyMarch 14, 2017 at 10:15 pm #760994Hi 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
March 14, 2017 at 10:50 pm #761014what 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 clearingsis there a link for a participant as me?
March 14, 2017 at 11:23 pm #761026Hey 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
March 14, 2017 at 11:41 pm #761038https://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
March 15, 2017 at 12:01 am #761055http://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.
March 15, 2017 at 12:03 am #761056hast du eine seite wo auch 5 sind?
March 15, 2017 at 12:14 am #761058ach 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; } }
March 15, 2017 at 12:48 am #761062Man 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
March 15, 2017 at 12:54 am #761063bei 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 ausMarch 15, 2017 at 1:11 am #761067Lieben 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
March 15, 2017 at 9:08 am #761223hast 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)March 15, 2017 at 10:40 am #761271Ja 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
March 15, 2017 at 10:42 am #761272Was 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.
March 15, 2017 at 11:01 am #761287immer 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.
March 15, 2017 at 11:05 am #761296bitte 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, 9 months ago by Guenni007.
March 15, 2017 at 11:42 am #761327Ok. 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.
March 15, 2017 at 1:07 pm #761384ok – 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
March 17, 2017 at 1:16 pm #762458@Guenni007
Besten Dank für deine Unterstützung!Liebe Grüße,
Andy -
AuthorPosts
- You must be logged in to reply to this topic.