Joomla!NL - [opgelost] Flexbox in Safari

Flexbox in Safari

17 jan 2017 02:24 - 17 jan 2017 11:12

#1

Hoi,

Ik heb een layout gemaakt met flexbox. Alles werkt prima, maar in safari wrapt hij niet en krijgt hij niet alle eigenschappen mee. Het ziet er dus vrijwel ongestyled uit, buiten dat hij door het niet wrappen op mobiel van het schermt afvalt.

In alle andere browsers (Opera, Mozilla en Chrome iig) werkt het precies zoals het hoort.

Iemand goed met flexbox? Ik heb de site lokaal draaien dus geen link helaas, sorry.

[strike]P.s. (weet niet of ik 2 dingen kan vragen in 1 draad maar here goes) Naast dit flexbox probleem maakt safari werkelijk een puinhoop van mijn typekit font. Ik heb de hele avond naar oplossingen voor bediden gezocht zonder resultaat. Heel frustrerend.[/strike]

Bvd
Edit Astrid: Graag 1 onderwerp per vraag.

Code:

/*Dit is de container */
.flex-grid {
	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
	background: #fafafa;
  
  	display: -webkit-box;
  	display: -moz-box;
  	display: -ms-flexbox;
  	display: -webkit-flex;
  	display: flex;
  
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */ 
  }

/*Linker item */

.bottom-left-flex {
  	flex: 1;
  	background-color: #fafafa;
  	margin: 40px;
  	min-width: 300px;
  	max-width: 500px;
  	padding: 0px 40px 0px 0px;
	  }

/*Rechter item */
	  
.bottom-right-flex {
  	flex: 1;
  	background: #FFD119;
  	display: flex;
  	margin: 40px;
  	min-width: 300px;
  	max-width: 500px;
  	padding: 0px 40px 0px 40px;
  	flex-wrap: wrap;
  	border-radius: 4px;
  
  	
  
  	display: -webkit-box;
  	display: -moz-box;
  	display: -ms-flexbox;
  	display: -webkit-flex;
  	display: flex;
  
  	-webkit-flex-wrap: wrap; /* Safari 6.1+ */ 
	  }

/*Dit zijn twee delen in het rechter item */	  

.bottom-right-flex-a {
  	flex: 1;
  	background: #FFD119;
  	margin-top: 40px;
  	padding: 10px;
  	min-width: 200px;
  	margin: auto;
  	
	  }
		  
.bottom-right-flex-b {
  	flex: 1;
  	background: #FFD119;
  	margin-top: 40px;
  	padding: 10px;
  	min-width: 200px;
  	margin: auto;
  	text-align: center;
  	padding-bottom: 40px;
	  }

Kostons
Heeft onderwerp gestart
Bekend met Joomla!NL
Berichten: 67

Flexbox in Safari

17 jan 2017 19:48

#2

Kan je een URL plaatsen naar de webpagina waar het over gaat?

Groetjes, Julian.

Voordat je een vraag post, gebruik eerst de zoekfunctie van ons forum eens.
Vragen via dit forum

Wil je Joomla!NL steunen? Dat kan met een donatie.

Juliank92
Algemeen Moderator
Berichten: 1722

Flexbox in Safari

17 jan 2017 20:02 - 17 jan 2017 20:25

#3

Hoi, heb hem net online gezet: guydroog.com/

Het gaat om het gele deel. Ik heb even de mobile styling eraf gehaald. Maar hij wrapt dus niet op een aantal mobile, vooral iPhone. Het is heel vreemd dat dat vrij wisselens is. Op mijn Samsung en op al mijn browsers zoals ik al zei loopt hij prima. iPhone en mac niet.

Hoop dat iemand iets kan vinden, ondanks dat ik geen code-master ben klopt het volgens mij namelijk.

Gr

Edit Juliank92: Ik heb je quote verwijderd, omdat het quoten van een direct voorafgaande reactie niets toevoegt.

Kostons
Heeft onderwerp gestart
Bekend met Joomla!NL
Berichten: 67

Flexbox in Safari

17 jan 2017 20:50

#4

Gaat idd niet lekker in Safari. Heb het getest met een schermbreedte van boven de 768px. (Want daarna was er een mediaquery actief)

Als je even bij de buitenste 2 (.bottom-left-flex .bottom-right-flex) flex: 1; veranderd in flex: 1 auto;
En bij de binnenste 2 (.bottom-right-flex-a .bottom-right-flex-b) flex: 1; veranderd in flex: 1 50%;

Dan zou het goed moeten gaan in Safari.

Groetjes, Julian.

Voordat je een vraag post, gebruik eerst de zoekfunctie van ons forum eens.
Vragen via dit forum

Wil je Joomla!NL steunen? Dat kan met een donatie.

Juliank92
Algemeen Moderator
Berichten: 1722

Flexbox in Safari

17 jan 2017 20:59 - 17 jan 2017 21:44

#5

Tnx!! Ik kan het alleen even niet checken, maar ik hoop echt dat dit werkt.

Mag ik vragen wat het verschil is, dus wat er mis ging en wat het verschil is?

edit: ik bedenk me net ik heb die flex: 1 auto; ook naar de mediaquery gekopieerd. Lijkt me logisch of zeg ik nu iets dat niet correct is?
edit2: Ff iemand gebeld met een iphone. Het wrapt nu wel

alleen de twee delen (.bottom-right-flex-a .bottom-right-flex-b) wrappen niet,moet ik daar in de mediaquery de 50% afhalen?

Gr

Edit Astrid: Ik heb je quote verwijderd, omdat het quoten van een direct voorafgaande reactie niets toevoegt.

Kostons
Heeft onderwerp gestart
Bekend met Joomla!NL
Berichten: 67

Flexbox in Safari

17 jan 2017 21:40

#6

alleen de twee delen (.bottom-right-flex-a .bottom-right-flex-b) wrappen niet,moet ik daar in de mediaquery de 50% afhalen?

Ja, dat denk ik wel. Maar ik heb geen iPhone dus ik kan dat niet controleren.

Groetjes, Julian.

Voordat je een vraag post, gebruik eerst de zoekfunctie van ons forum eens.
Vragen via dit forum

Wil je Joomla!NL steunen? Dat kan met een donatie.

Juliank92
Algemeen Moderator
Berichten: 1722

Flexbox in Safari

17 jan 2017 21:57 - 17 jan 2017 21:59

#7

margin: 1 100%; werkte in de mediaquery.

Echt heel erg bedankt!

Edit Astrid: Ik heb je quote verwijderd, omdat het quoten van een direct voorafgaande reactie niets toevoegt.

Kostons
Heeft onderwerp gestart
Bekend met Joomla!NL
Berichten: 67

Laatste nieuws

Welkom bij Joomla!NL

opgelost Flexbox in Safari

Flexbox in Safari

Flexbox in Safari

Flexbox in Safari

Flexbox in Safari

Flexbox in Safari

Flexbox in Safari

Flexbox in Safari

Laatste forumberichten

Wil je Joomla!NL steunen?