CSS probleem op smartphone

Status
Niet open voor verdere reacties.

Killerclown

Gebruiker
Lid geworden
30 dec 2007
Berichten
181
Goeieavond,

Ik ben redelijk nieuw in CSS en probeer een pagina te maken maar ik stoot op enkele problemen waar ik de oplossing niet van zie.
Kan iemand mij verder helpen?

Hier is de pagina: http://www.riddlebox.be/menu2/test4.html

Probleem 1: de column onder de navbar plakt tegen de navbar. Ik zou er graag een beetje plaats tussen hebben.
Ik heb dit proberen oplossen met padding-top wat lukt maar dan staat mijn column2 niet meer in het midden maar helemaal links.
En dit krijg ik niet in orde. Iemand een idee?

Probleem 2: Als ik mijn pagina bekijk op smartphone dan staat de tekst buiten het scherm. Als ik op pc mijn browser verklein dan wordt de tekst mooi afgekapt maar op mobiel niet. Wordwrap lukte mij niet. Iemand een idee om dat op te lossen?

Probleem 3: Op smartphone zit er nog een leeg stuk aan de recherkant (zie afbeelding). Dit is natuurlijk niet de bedoeling. Het menu en header moeten mooi op het scherm staan zonder opzij de kunnen bewegen met het scherm. Op pc heb ik eveneens dit probleem niet als ik de browser verklein.
Iemand een idee hoe ik dat moet oplossen?
Screenshot_20181223-181939.jpg

Alvast dank voor de moeite.
 
Met de Bootstrap reboot ziet het er goed uit op alle browsers. En met de Bootstrap grid kan je veel problemen oplossen én je hoeft zelf minder css te schrijven. Jouw menu heb ik erin gelaten. Zie bijlage.

Alle problemen die je noemde zijn met class="row" en class="col-...-..." opgelost, daarom is er wat overbodige style verwijderd.
 

Bijlagen

  • webpagina.zip
    2,8 KB · Weergaven: 25
Laatst bewerkt:
Bedankt. Bootstrap kende ik niet. Het zag er inderdaad goed uit.
Maar ik ben er toch niet mee verder gegaan. Ik geraakte niet tot het uiteindelijke resultaat wat ik in gedachten had voor mijn pagina.

Ik heb ondertussen mijn problemen kunnen oplossen door terug vanaf 0 op te bouwen. Blijkbaar zat er hier en daar een klein foutje in waardoor het niet goed kwam. Ik heb mijn pagina verder kunnen maken met veel zweet :).

Het enige probleem waar ik nu nog op stuit is het volgende.

Op pc ziet mijn menubalk er goed uit maar op smartphone verschijnt er onder de groene "HOME" nog een stukje grijze balk.
Screenshot_20181229-200713.jpg

Mocht iemand weten hoe ik dat nog weg krijg, dat zou een grote hulp zijn want ik vind niet waar dit vandaan komt.
Webpagina: www.riddlebox.be/menu2/test8.html

Merci.
 
Heb je ergens een border, margin of padding staan van een paar pixels?
 
Verklein de font-size eens van de icon, dat zou kunnen helpen (font-size is nu 15px)
Code:
.topnav .icon {
  font-size: 14px !important;
}
 
Verklein de font-size eens van de icon, dat zou kunnen helpen (font-size is nu 15px)
Code:
.topnav .icon {
  font-size: 14px !important;
}

Thanks!!! Dat was het. Ik had al met alle paddings, margins enzo zitten spelen maar niks bracht de oplossing.
Blijkt dat ik in de <body>, in de opbouw van mijn menu, inderdaad 15px had staan. Ik had dus enkel maar in het css gedeelte gezocht.

Super bedankt!
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan