login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Rare witte rand zijkant over op iPad met bootstrap

Offline GroundZero - 11/08/2015 18:48
Avatar van GroundZeroLid Beste lezers,

ik heb vandaag een website gemaakt door gebruik te maken van Bootstrap.
Ziet er allemaal goed uit, en werkt prima echter op de iPad heb ik aan de rechterkant een witte balk over (verticaal) en mijn banner word ook afgekapt.

Dit gebeurd alleen op de iPad verder nergens. Ik heb zelf geen iPad maar maak gewoon gebruik van websites die "testen als iPad". Bij al deze websites is dit probleem.

http://s3.postimg.org/3x82bhhdv/Naamloos_2.jpg

Onder de footer, en rechts van de site dus witruimte. Ik gebruik gewoon bootstrap en heb zelf weinig tot geen CSS toegevoegd. Misschien iemand die zo 1 2 3 het probleem herkent of het zelf ook eens heeft ondervonden?

Mijn HTML: Plaatscode: 142467
Ik laad via PHP andere pagina's in, maar het ligt niet aan die pagina's want ook als ik een lege pagina laad met slechts de volgende regel er in, dan heb ik ook nog steeds witruimte 

<div class="container"></div>

De CSS code van mijn banner is wel zelf gemaakt. Deze is als volgt:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. .intro-banner {
  2. 	width:auto;
  3. 	height:260px;
  4. 	background:#ececec;
  5. 	background-image:url(../images/banner.jpg);
  6.  
  7. 	-webkit-background-size: cover;
  8. 	-moz-background-size: cover;
  9. 	-o-background-size: cover; 
  10. 	background-size:cover;
  11.  
  12. 	background-position: center center;
  13. 	background-repeat:no-repeat;
  14.  
  15. 	margin-top:30px;
  16. }


Hopelijk weet iemand hoe ik dit probleem kan oplossen.

Groetjes

5 antwoorden

Gesponsorde links
Offline Thomas - 11/08/2015 21:16
Avatar van Thomas Moderator Heb je al met een CSS-inspector (functietoets F12 in de meeste browsers) gekeken wat hier aan de hand kan zijn?

Heb je ergens een werkend voorbeeld? Dat praat wat makkelijker :].

En tevens: welke websites gebruik je om iPads te simuleren?
Offline GroundZero - 12/08/2015 17:05 (laatste wijziging 15/08/2015 10:59)
Avatar van GroundZero Lid Eigenlijk verschillende websites, bijvoorbeeld http://www.responsimulator.com alhoewel het hier om iPad gaat.

http://bit.ly/

Staat hij live maar zoals ik al zeg, ik heb zelf geen iPad dus kan het niet goed testen. Heb hier wel 3 computers en verschillende browsers en dan werkt het prima. Alleen op iPad (volgens andere mensen) niet.

De banner loopt niet goed door en -of is niet goed zichtbaar en als je naar rechts gaat is er een verticale witte ruimte naast de website.

http://ipadpeek.com/

Als ik het daar test dan kan ik ook naar rechts scrollen en zie ik de witte rand. Ook de banner loopt hier niet goed door (horizontaal) 
Offline Thomas - 12/08/2015 20:47 (laatste wijziging 12/08/2015 21:30)
Avatar van Thomas Moderator Het lijkt erop dat de container-class in je navbar de boosdoener is? Specifiek: de width van 750px. Deze zit in bootstrap.min.css.

Als je deze verandert in width: auto; of uitcomment verdwijnt je horizontale scrollbalk in de navigatie althans.

Ik zou het echter op een echte iPad testen, dan heb je wat meer zekerheid.

Die container heeft trouwens ook horizontale padding, wat natuurlijk bijdraagt aan de totale breedte van de cel. Deze verwijderen lijkt echter niet het gewenste effect te hebben - de horizontale scrollbalk wordt alleen maar kleiner, maar verdwijnt niet.

EDIT: het bovenstaande kon ik trouwens in < 5 minuten herleiden met eerdergenoemde in-browser HTMl/CSS inspector (in dit geval met Firebug in FF, maar met andere varianten kun je de klus ook klaren).

EDIT: LOOOOL, je wijst in het oorspronkelijke bericht zelf precies de oorzaak aan:
Citaat:
Mijn HTML: Plaatscode: 142467
Ik laad via PHP andere pagina's in, maar het ligt niet aan die pagina's want ook als ik een lege pagina laad met slechts de volgende regel er in, dan heb ik ook nog steeds witruimte

<div class="container"></div> <<<<< ROFL
Offline GroundZero - 15/08/2015 11:01
Avatar van GroundZero Lid Hmmmm oke duidelijk, dankjewel voor je antwoord haha Toch dat ding er maar uit slopen dan
Offline Thomas - 15/08/2015 11:54
Avatar van Thomas Moderator Euh, je kunt toch gewoon een stylesheet na je bootstrap css laden die deze ene stijl corrigeert? Dat lijkt mij de makkelijkste fix.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.261s