[opgelost] Schaling foto's bij kleine schermen

Schaling foto's bij kleine schermen

07 apr 2023 15:22 - 07 apr 2023 15:23

#1

Daar ben ik weer...
Ik heb eerder een post gemaakt met de vraag hoe de afbeeldingen in mijn artikel te schalen dmv een div /colum
dit werkt zoals ik zou willen, echter loop ik tegen een vreemd probleem aan bij verschillende artikelen.

Artikel 1 t/m 4 worden onder elkaar weergegeven.
de opzet is gelijk. artikel 1 en 2 schalen netjes mee maar artikel 3 en 4 niet.
kopieer ik artikel 1 (de html code) in artikel 3 werkt het wel, pas ik de tekst aan verdwijnt de schaling welke de div/colum zou moeten doen.
Het zelfde geld voor artikel 4
ik heb toen de tekst stukje voor stukje verwijderd en de juiste tekst toegevoegd.
Ik kom heel ver en heb zitten puzzelen, maar een klein stukje tekst uit het gekopieerde artikel moet ik laten staan anders is mijn layout weer kapot.

zie hier een link naar de site:
Link

In het 3e artikel "tarieven" moet ik de emaillink laten staan, verwijder ik deze (deze hoort hier eigenlijk niet) word mijn afbeelding niet meer onder/boven de tekst weergegeven op schermen kleiner dan 800px (telefoon portrait) maar blijft deze naast de tekst en is heel klein.
de artikelen er boven werken wel goed.
Het artikel Hapjes en drankjes heeft het zelfde, hier heb ik een regel tekst aan het einde die moet blijven staan, dit heb ik wel kunnen oplossen door de tekst de zelfde kleur te geven als de achtergrond maar dat is natuurlijk niet hoe het zou moeten zijn...

Heeft iemand enig idee wat er mis gaat met de layout als ik de tekst aanpas.

mijn css is als volgt:

Code:

/* 2 div's naast elkaar in een row*/
.row {
  display: flex;
}

.column {
  flex: 60%;
}

.column-img {
  display: flex;
  flex: 40%;
  justify-content: center;
  align-items: center;
  
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .column {
    width: 100%;
  }
  .column-img {
    width: 100%;
    justify-content: center;
    align-items: center;
  }
}

Laatst bewerkt 07 apr 2023 15:23 door basssment.

basssment
Heeft onderwerp gestart
Bekend met Joomla!NL
Berichten: 100

Schaling foto's bij kleine schermen

07 apr 2023 15:41

#2

.row heeft al een definitie standaard in je template. Dus die hoef je niet aan te maken.
Dit zou beter moeten zijn:

Code:

/* 2 div's naast elkaar in een row*/
@media screen and (min-width: 600px) {
      .column {
    width: 60%;
  }
  .column-img {
    width: 40%;
    padding: 0px;
  }
} 
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
  .column-img {
    width: 100%;
    padding: 0px;
  }
}

Enne.......... verwijder alle niet zelfgemaakte definities uit je custom.css. Lijkt erop dat je je site eerst met voorbeelddata (en sp pagebuilder) heb geïnstalleerd, dus je custom.css heeft heel veel onnodige en ongebruikte definities.

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Astrid
Moderator + Technisch team
Berichten: 37102

Schaling foto's bij kleine schermen

07 apr 2023 20:49

#3

Hoi Astrid, wederom bedankt voor je hulp

Ik heb mijn css deel afgehekt en die van jou toegevoegd en dat lost het probleem inderdaad op.

Volgende stap is de css opruimen, ik heb meerdere templates geïnstalleerd om wat te testen.
Deze hebben waarschijnlijk ook de css aangepast, als ik een template deinstalleer word dan de css automatisch ook weer aangepast of dien ik dat handmatig te doen?

basssment
Heeft onderwerp gestart
Bekend met Joomla!NL
Berichten: 100

Schaling foto's bij kleine schermen

07 apr 2023 21:09

#4

Maak even een nieuw draadje aan voor je tweede vraag s.v.p.
Zo houden we het forum overzichtelijk.
Ik sluit dit draadje met de oplossing.

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Astrid
Moderator + Technisch team
Berichten: 37102

Laatste nieuws

Welkom bij Joomla!NL

opgelost Schaling foto's bij kleine schermen

Schaling foto's bij kleine schermen

Schaling foto's bij kleine schermen

Schaling foto's bij kleine schermen

Schaling foto's bij kleine schermen

Laatste forumberichten

Wil je Joomla!NL steunen?