Joomla!NL - beez3 template website niet responsive op mobiel device

beez3 template website niet responsive op mobiel device

18 aug 2019 10:23

#13

klopt mijn fout, nog 1 vraagje, ik zie dan op mijn mobiel boven in een blauwe balk, met de zoek functie erin, kan ik deze balk ook wit maken?

Nogmaals veel dank, ik ben blij dat alles nu prima werkt.

showfotos
Heeft onderwerp gestart
Joomla!NL ontdekker
Berichten: 54

beez3 template website niet responsive op mobiel device

18 aug 2019 10:33

#14

Regel 421 van user.css background aanpassen.

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Astrid
Moderator + Technisch team
Berichten: 37556

beez3 template website niet responsive op mobiel device

18 aug 2019 10:35 - 18 aug 2019 10:41

#15

moer ik fan alle @media only screen weg halen?

Code:

@media only screen and (min-width: 600px) {
}

@media only screen and (min-width: 768px) {
}

@media only screen and (min-width: 992px) {
}

@media only screen and (min-width: 1382px) {

Edit Astrid: Ik heb de code tussen codetags geplaatst, volgende keer graag zelf doen.

showfotos
Heeft onderwerp gestart
Joomla!NL ontdekker
Berichten: 54

beez3 template website niet responsive op mobiel device

18 aug 2019 10:41

#16

Nee, die doen niets, maar kan je rustig laten staan voor als je deze eventueel later nog nodig zou hebben.
Dit staat op regel 421:

Code:

#line {
		text-align: center;
		top: 0;
		right: auto;
		max-width: 100% ;
		min-width:100%;

		margin: 0 0px; background:#095197;
	}

Alleen de laatste regel aanpassen met de door jou gewenste kleurcode. Als je hem wit wilt hebben dan code:

Code:

#fff

gebruiken.

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Astrid
Moderator + Technisch team
Berichten: 37556

beez3 template website niet responsive op mobiel device

18 aug 2019 10:51 - 18 aug 2019 10:54

#17

zoek balk is nu wit.
ik heb onderstaand toegevoegd in de user.css

Code:

@media only screen and (max-width: 740px) {

Edit Astrid: Ik heb de code tussen codetags geplaatst, volgende keer graag zelf doen.

showfotos
Heeft onderwerp gestart
Joomla!NL ontdekker
Berichten: 54

beez3 template website niet responsive op mobiel device

18 aug 2019 11:06

#18

Een lege mediaquery doet niets. Je hebt nu de eerdere wijziging uit #12 weer ongedaan gemaakt.

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Astrid
Moderator + Technisch team
Berichten: 37556

beez3 template website niet responsive op mobiel device

18 aug 2019 11:14

#19

Code:

@media only screen and (max-width: 740px) {
.logoheader {
background-size: contain !important; 
min-height:200px;
margin:0
}
}

dit heb ik nu geplaatst, maar de klopt de header en de tekst er in niet meer? op de iphone

showfotos
Heeft onderwerp gestart
Joomla!NL ontdekker
Berichten: 54

beez3 template website niet responsive op mobiel device

18 aug 2019 11:20

#20

Nee, je hebt dit geplaatst:

Code:

@media only screen and (max-width: 740px) {
.logoheader {

	.logoheader {background-size: contain !important; min-height:200px; margin:0}
	.box {
		border-left: 0 !important;
		border-bottom: solid 1px #ddd;
	}
	#line {
		text-align: center;
		top: 0;
		right: auto;
		max-width: 100% ;
		min-width:100%;

		margin: 0 0px; background:#ffffff;
	}
	#header form input {
		float: none; margin-bottom:4px
	}
	#menuwrapper { margin-top:10px; }
	#header ul.menu {position:relative; top:0;left:20px; right:20px; margin:0; width:90%; border-radius:4px}
	#header ul.menu li:first-child a {border-radius: 4px 4px 0 0}
	#header ul.menu li:last-child a {border-radius:0 0 4px 4px }
	#header ul.menu li a:link,
	#header ul.menu li a:visited {
		display: block;
		padding: 6px 10px;
		border-bottom: solid 1px #ccc
	}
}

Je hebt teveel gekopieerd uit de mediaquery voor mobiel staand en er staat twee keer .logoheader in.
Regel 398 t/m 449 moeten er zo uitzien:

Code:

@media only screen and (max-width: 480px) {

	img {
  max-width: 100%;
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}


	#fontsize{display:none}
	#nav,#wrapper2,#wrapper,.cols-3 .column-1,.cols-3 .column-2,.cols-3 .column-3,#right,.box,#header form
		{
		float: none;
		width: 100%
	}
	#header {padding-top:3em}
	#header form  {margin:0}
		.box {
		border-left: 0 !important;
		border-bottom: solid 1px #ddd;
	}
	#line {
		text-align: center;
		top: 0;
		right: auto;
		max-width: 100% ;
		min-width:100%;

		margin: 0 0px; background:#ffffff;
	}
	#header form input {
		float: none; margin-bottom:4px
	}
	#menuwrapper { margin-top:10px; }
	#header ul.menu {position:relative; top:0;left:20px; right:20px; margin:0; width:90%; border-radius:4px}
	#header ul.menu li:first-child a {border-radius: 4px 4px 0 0}
	#header ul.menu li:last-child a {border-radius:0 0 4px 4px }
	#header ul.menu li a:link,
	#header ul.menu li a:visited {
		display: block;
		padding: 6px 10px;
		border-bottom: solid 1px #ccc
	}
}

@media only screen and (max-width: 740px) {


	.logoheader {background-size: contain !important; min-height:200px; margin:0}

}

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Astrid
Moderator + Technisch team
Berichten: 37556

beez3 template website niet responsive op mobiel device

18 aug 2019 11:36

#21

alles staat er nu in, op mijn mobiel staat het goed?

Is het ook mogelijk, om de afstand/spacing tussen onderkant header logo met tekst, en bovenkant van het hoofdmenu te verkleinen?

Hetzelfde voor bovenkant header logo en de zoek functie?

showfotos
Heeft onderwerp gestart
Joomla!NL ontdekker
Berichten: 54

beez3 template website niet responsive op mobiel device

18 aug 2019 11:46

#22

bovenkant dit toevoegen aan user.css voor regel 387:

Code:

#header {
	padding: 0px;
}

en ook aanpassen in user.css op regel 414

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Astrid
Moderator + Technisch team
Berichten: 37556

beez3 template website niet responsive op mobiel device

18 aug 2019 12:21

#23

ik zie zowel boven de header logo (geel) als onder de header niks veranderen. qua spacing?

showfotos
Heeft onderwerp gestart
Joomla!NL ontdekker
Berichten: 54

beez3 template website niet responsive op mobiel device

18 aug 2019 18:45

#24

Even goed lezen wat ik hierboven schrijf.

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Astrid
Moderator + Technisch team
Berichten: 37556

Laatste nieuws

Welkom bij Joomla!NL

beez3 template website niet responsive op mobiel device

beez3 template website niet responsive op mobiel device

beez3 template website niet responsive op mobiel device

beez3 template website niet responsive op mobiel device

beez3 template website niet responsive op mobiel device

beez3 template website niet responsive op mobiel device

beez3 template website niet responsive op mobiel device

beez3 template website niet responsive op mobiel device

beez3 template website niet responsive op mobiel device

beez3 template website niet responsive op mobiel device

beez3 template website niet responsive op mobiel device

beez3 template website niet responsive op mobiel device

beez3 template website niet responsive op mobiel device

Laatste forumberichten

Wil je Joomla!NL steunen?