1. Meander
  2. Templates
  3. dinsdag 28 november 2017
Ik ben de template van Protostar aan het bewerken naar een voorbeeld die ik van een WP theme heb gezien.
Maar nu valt alleen de website titel buiten beeld op de mobiel.
Hoe kan ik dit aanpassen voor mobile devices, maar dat ie op de desktop wel even groot blijft?

HIER de link

Alvast bedankt voor het kijken.
Rondeb Geaccepteerde antwoord Pending Moderation
Hallo Meander,

neem een kijkje hier en hier dat heeft betrekking op media queries.

Denk dat je er dan wel uitkomt.

Succes ermee.

groeten Ron :)
  1. 2 weken geleden
  2. Templates
  3. # 1
Meander Geaccepteerde antwoord Pending Moderation
Ah, iets in de trant van die tweede link had ik al gevonden en geprobeerd, maar ik wist niet dat je dit dan apart voor elke device moest doen. Ook wel logisch eigenlijk :(
Nu helaas geen tijd meer, maar ik ga er morgen even mee aan het stoeien.

Thanks!
  1. 2 weken geleden
  2. Templates
  3. # 2
Rondeb Geaccepteerde antwoord Pending Moderation
Er wordt ook wel eens gebruik gemaakt van % i.p.v. PX maar of dit goed werkt laat ik even in het midden.

Succes ermee.

Groeten Ron
  1. 2 weken geleden
  2. Templates
  3. # 3
Patrick Smits Geaccepteerde antwoord Pending Moderation
Gebruikersgroep regio Utrecht
Dit toevoegen aan css en dan zelf even bepalen wat de font-size mag zijn.


@media (max-width: 385px){
.site-title {
font-size: 18px;
}
.site-description {
font-size: 12px;
}
}
  1. 2 weken geleden
  2. Templates
  3. # 4
Meander Geaccepteerde antwoord Pending Moderation
Volgens mij is het gelukt (vanaf vanmorgen 5.30 uur :o ), en heb ik nu voor de meest gangbare devices de juiste media query toegevoegd.

Alleen breekt hij in sommige breedtes de menu module titel.
Op tablets doet hij het bij 1024, 960, en 800 breedte, en op een mobiele breedte van 320.
Op de mobiel breekt hij echter de titel niet wanneer ik de layout vloeiend maak, maar die wil ik wel graag statisch houden.
Is er een manier om de layout alleen voor de mobiel vloeiend te maken?

En hoe kan ik voorkomen dat hij op tablets ook de module titel breekt?

Zie afbeeldingen.
Ik heb de site HIER getest.
Bijlagen
  1. 2 weken geleden
  2. Templates
  3. # 5
Jaydot Geaccepteerde antwoord Pending Moderation
Protostar gebruikt zelf de volgende breakpoints:
/*** BREAKPOINTS ***/
|0---480---767|768---979|980---1200|
het waarschijnlijk handig om die zelf ook aan te houden. Je kunt immers niet zelf op alle bestaande devices testen, en met deze breakpoints heb je bij mijn weten alles zo'n beetje afgedekt.
Om het afbreken van de titels te vermijden, zou je voor kleiner scherm een wat kleinere font-size kunnen instellen.
  1. 2 weken geleden
  2. Templates
  3. # 6
Meander Geaccepteerde antwoord Pending Moderation
Om het afbreken van de titels te vermijden, zou je voor kleiner scherm een wat kleinere font-size kunnen instellen.


Dat heb ik al geprobeerd, maar op de een of andere manier pakt hij de veranderingen niet.

Code:

@media (max-width: 1024px) {
.well .page-header {
text-align: center;
color: #ff8c8c;
line-height: 25px;
margin-left: 0px;
margin-right: 0px;
margin-top: -43px;
background: #fff;
font-size: 10px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0px;
}}


Maar in het voorbeeld breekt hij nog steeds de woorden af. Maakt niet uit hoe klein ik het font maak.

.
  1. 2 weken geleden
  2. Templates
  3. # 7
Meander Geaccepteerde antwoord Pending Moderation
Herstel, het duurde even, maar nu zie ik dus de veranderingen wel.
  1. 2 weken geleden
  2. Templates
  3. # 8
Jaydot Geaccepteerde antwoord Pending Moderation
Ha, ik wilde net zeggen: op mijn foon zie ik keurig kleine lettertjes :).
Kwestie van cache opschonen, waarschijnlijk.
Bijlagen
  1. 2 weken geleden
  2. Templates
  3. # 9
  • Pagina :
  • 1


Er zijn nog geen reacties op dit bericht.
U mag echter niet reageren op dit bericht.