Responive header artisteer 4

18 jan 2014 15:30 - 18 jan 2014 15:59

Beste,

Mijn header past zich niet aan (niet responsive) bij weergave op telefoon of tablet.

Naar een oplossing voor bovenstaand probleem heb ik gister middag de hele middag gezocht op internet. Er zijn natuurlijk oplossingen met het aanpassen van de css. Maar voor een beginner zoals ik heb ik uit eindelijk zelf een makkelijke oplossing gevonden die ik met jullie wilde delen.

* Ik heb als header tekst. Met Photoshop heb ik hiervan een plaatje gemaakt met transparante achtergrond (opslaan als .png).
* Dit plaatje heb ik geupload naar een nieuwe map (die ik heb aangemaakt) op de backend mijn site.
* Ga dan naar modules. Maak een nieuwe module aan en selecteer "random image".
* Mijn instellingen zijn te zien op foto1. Deze zullen voor jullie waarschijnlijk anders zijn.
Let op!!! Dat alleen je header in de nieuwe map staat als plaatje, en niets anders.
* Sla alles op en je header zou nu responsive moeten zijn.

* Daarna zag ik op mijn smartphone dat er teveel ruimte zat tussen mijn header en het hoofdmenu. (Zie foto2)
Dit heb ik aangepast door onderstand in de template.responsive.css aan te passen.

Code:

.responsive .art-header 
{
   width: auto;
   height: auto;
   min-height: 100px;
   min-width: 1%;
   background-position: center center !important;
   background-size: cover !important;
   background-repeat: repeat !important;
}

*De min-height: 100px; heb ik aangepast naar min-height: 50px; zie het resultaat op foto3.

Zoals gezegd, omdat ik zelf lang aan het zoeken ben geweest deel ik het met jullie.
Mocht je vragen hebben over mijn uitleg of wat aan me uitleg gehad hebben laat het me dan even weten