div box doet raar bij smalle schermen

[trekker22]

ik heb op een website onderaan een Description box staan en die komt pas goed tot zijn recht bij de grotere resoluties.

Op de kleinere resoluties kun je hem ook zien als je gaat scrollen. Echter als je een bepaalde tussenmaat qua grootte window maakt, dan springt die pontificaal in beeld?

zie dezes screenshot op IE + Chrome:





Het komt een een WordPress Theme en dit staat er in de CSS:

.single-page .description {
/*background: #423780 url(images/dg.png) repeat-x bottom;*/
background: #ff6dee url(images/dg.png) repeat-x bottom;
box-shadow: 0 3px 0 rgba(0,0,0,0.2);
border-bottom: 1px solid rgba(250,250,250,0.1);
padding: 15px;
width: 720px;
margin: 15px;
margin-left:auto;
margin-right:auto;
position: relative;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
/*overflow:hidden;*/

}

Ik kan nergens zien wat nog deze DIV box zo raar laat verspringen? Iemand anders toevallig wel

[NMe]

Dat kunnen echt tig verschillende dingen zijn afhankelijk van de container waar het element in zit en hoe je HTML rondom dit element is opgesteld...

[trekker22]

was ik al bang voor... Is een Word Press Theme en me kennis van CSS is te weinig op dit moment... Kijken of me developers in Inda het kunnen fixen...

[InZane]

trekker22 schreef op woensdag 22 januari 2014 @ 18:25:
was ik al bang voor... Is een Word Press Theme en me kennis van CSS is te weinig op dit moment... Kijken of me developers in Inda het kunnen fixen...

Kijk ook even naar de teksten..

There are the famous birds of Angry Birds by Rovio.
The eggs get stolen by the Bad Piggies and it's the birds task to rescue all eggs for it's to late.

[trekker22]

ach de teksten bij de Description kijkt verder niemand naar

[trekker22]

Ik heb hier zelf nog even naar zitten kijken;]

voor me Description box DIV begint staat een Clear Fix div:

<div class="clearfix"></div>

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

Als ik deze <div class="clearfix"></div> weghaal dan wordt de Description box altijd heel erg groot, maakt niet uit in welke browser;

zet ik die <div class="clearfix"></div> er wel neer dan gaat het in Chrome goed, maakt niet uit welke breedte de browser heeft, echter bij Firefx, IE dan wordt de Description box DIV veel te lang uitgerekt zoals in bovenstaande screenshots...

Zegt iemand iets dit probleem? Mijn HTML kennis is voornamelijk van voor voor de CSS tijd...

[Vos]

Modbreak: nergens voor nodig.

[ Voor 90% gewijzigd door NMe op 28-01-2014 13:12 ]

[NMe]

trekker22 schreef op dinsdag 28 januari 2014 @ 13:01:
Zegt iemand iets dit probleem? Mijn HTML kennis is voornamelijk van voor voor de CSS tijd...

Ik weet in elk geval dat je template 3 elementen naast elkaar zet door middel van floaten, want anders zou het weghalen van die clearfix niet veel doen. De manier waarop de elementen gefloat worden in combinatie met (min-)width zou iets uit kunnen maken, maar zonder de écht relevante code kunnen we er niet veel over zeggen. En door simpelweg ál je code te dumpen kom je er ook niet, want we gaan geen complete CSS-file doorpluizen voor je. Tenzij je zelf kunt identificeren welke CSS relevant is voor je probleem komen we dus niet ver.

[Vos]

NMe, ik was nog aan het bewerken met een on-topic toevoeging. Bedankt .

---

Bij mij in FF 26 en Chrome 32 zie ik de situatie niet zoals de TS die schetst. De ads rechts vallen wel over het spel heen bij het verkleinen van de browser (<1024 pixels breed).

En wat bedoel je met 'Description box DIV'. Ik zie geen div met de naam 'description' in de broncode.

In FF start het spel niet eens trouwens.

[ Voor 14% gewijzigd door Vos op 28-01-2014 13:23 ]

[trekker22]

Die div box Description zie je nu niet omdat ik hem heb uitgezet omdat die anders het voor veel bezoekers verpest.

In FF zouden meeste spellen wel moeten werken, behalve misschien Unity Games? Rest is alles Flash.

Vind het zelf ook lastig uitpluizen omdat het een bestaand WordPress theme is wat aangepast is en mijn CSS kennis te weinig...