opgelost Logo wil niet responden op resolutiewijziging

Hoi Luitjes,

Ziet iemand wat ik hier verkeerd doe? Ik heb namelijk een overlay gemaakt in de module
Vinaora Nivo Slider .. dit gaat prima, maar het logo wil niet responsive worden. Ondanks het feit
dat ik de breedte (max-width ook geprobeerd) op 100% en de hoogte op auto heb gezet.

Dit is de link waar het om gaat:

www.hielke.net/paintedflesh

Groetjes,
Hielke

Ja, hij wordt inderdaad niet kleiner. Je hebt in de class slideoverlay een aantal definities gedaan:
Nu snap ik van de meeste definities wel waarom je ze doet, maar doordat je de afbeelding meer naar links trekt, valt ie niet meer binnen je definitie van max-width: 100%; . Want mijn browser is op zijn smalst bijvoorbeeld 306px, dan is de content van je pagina 251px, +70px marge voor content van de afbeelding is 321px, en je afbeelding is 312px breed.

Maar zelfs al haal je de definitie margin-left hier weg, dan nog zal de afbeelding niet kleiner worden dan de breedte van de content, omdat het logo een los element is binnen div.container(dat is natuurlijk niet qua declaratie zo, maar wel hoe hij geïnterpreteerd wordt) en dus daarvan dan maximaal 100% breedte van in zal nemen(max-width:100%). Zoals in bovenstaand voorbeeld zal de de breedte van de afbeelding 251px worden.

Omdat je bootstrap gebruikt is het misschien handiger om daarmee een oplossing te doen, of anders gebruik maken van een mediaquery o.i.d. .

Super Julian!
Je maakt het idd een stuk duidelijker en ben dan ook meteen begonnen met puzzelen ..
Het moet toch op een bepaalde manier mogelijk zijn lijkt me, maar ik versla er compleet in

Ik ben ook even bezig geweest met de @Media functie om zo per resolutie dingen te bepalen, maar daar wordt het niet overzichtelijker op De vraagtekens die dan bij me opkomen op een gegeven moment is de volgorde van de min- en max-width (in de @Media). Zou het ook mogelijk zijn om een bepaalde resolutie-range aan te geven, oid.. ?

Heb je nog enige tips?

Ow jah, je hebt het over Bootstrap EN mediaquery .. dan zal ik vast wat dingen door elkaar halen. Misschien kun je me een bepaalde richting op duwen

Tja bootstrap oplossing was meer met het oog op je template die in elkaar schuift, je logo heeft een position absolute dus die gaat er overheen zweven enzo .

Misschien handig als je het in 5 groepen houdt (voor het overzicht):
- telefoonschermen
- tablet's
- grote tablet of hele lage resolutie
- kantoor pc formaat
- pc's met een hogere resolutie

Bijvoorbeeld zoiets als dit (zoals je ziet met een range er tussen):

Ik zie dat je logo nu in elk geval mee krimpt, en dat je hiervoor gebruik maakt van mediaqueries zoals beschreven in post #4. Ik zal dit topic sluiten.
Je kunt in de toekomst zelf na het terugkoppelen de topic sluiten door op de groene "Dit is de oplossing" knop te klikken.
Kijk ook hier .