Verschil in FF en Chrome (wordpress website)

Status
Niet open voor verdere reacties.

femke98

Meubilair
Lid geworden
16 dec 2006
Berichten
6.660
Hoi allen,

Ik heb een website gemaakt maar het gekke is dat de lay-out er iets anders uitziet op Chrome dan op Firefox.
Nu werk ik zelf niet met Chrome of Chromium, maar ik kijk wel altijd even.
Op een desktop en tablet is het wel in orde, net zoals in FF dus.

Het is maar een klein dingetje maar ik vind het storend.

Als eerste screenshots van FF, zoals het hoort, de tweede is van Chrome.

voucher19.jpgvoucher21.jpg

Waar ligt het aan en wat kan ik er aan doen?
En wat voor een info hebben jullie nodig?
De website is karins.shop
Theme Wordpress is Latte (one page)

Wie helpt hiermee?
 
Ik kan de tweede foto ook deels in firefox reproduceren door een grote screenwidth te simuleren. Lijkt op een verschil met wanneer een newline automatisch wordt ingevoegd:

zelfgemaakt voor
dieren <--probleem

zelfgemaakt
voor dieren <-- werkt als boven

maar lijkt niet exclusief een probleem voor chrome
 
Het probleem ontstaat inderdaad wanneer je de website op een grotere schermbreedte bekijkt en wordt veroorzaakt door de terugloop van de tekst; bekijk je de website op een smal scherm heb je in alle drie de vakken een overloop en zijn ze dus even groot, bekijk je de website op een breder scherm heb je alleen in het eerste vak een overloop en is deze dus langer dan de overige twee.

Ik heb in de Inspector in Firefox een kleine aanpassing gedaan en de parameter "height" toegevoegd aan het element ".service-icon" (volgens de inspector te vinden op regel 505 van het style.css van je thema :) en een vaste hoogte van 240 pixels ingesteld. Dat ziet er dan op een groot scherm als volgt uit:
20180630.PNG

De aanpassing zorgt ervoor dat de drie vakken ten alle tijde dezelfde hoogte hebben. In de screenshot vind je ook de aanpassing die ik heb gedaan, wellicht dat je hem zo het handigst terug kunt vinden en in je themabestanden kunt aanpassen. Echt mooi vind ik de aanpassing ook niet, zeker niet wanneer je nu de website weer op een smaller scherm bekijkt; dan krijg je nl. veel witruimte onderin de vakken. Wellicht dat je nog wat kunt spelen met de hoogte van 240 pixels of hopen dat misschien iemand anders een mooiere oplossing heeft :).
 
Het probleem ontstaat inderdaad wanneer je de website op een grotere schermbreedte bekijkt en wordt veroorzaakt door de terugloop van de tekst; bekijk je de website op een smal scherm heb je in alle drie de vakken een overloop en zijn ze dus even groot, bekijk je de website op een breder scherm heb je alleen in het eerste vak een overloop en is deze dus langer dan de overige twee.

Ik zie het op mijn tablet, mobiel, laptop en desktop wel goed in Firefox. Ik gebruik verder geen andere browser (maar heb wel Chromium geïnstalleerd).
Dus wat ik hierboven heb gequote, klopt niet helemaal. Het is echt alleen in Google Chrome en Chromium dat het er anders uitziet.

Echt mooi vind ik de aanpassing ook niet, zeker niet wanneer je nu de website weer op een smaller scherm bekijkt; dan krijg je nl. veel witruimte onderin de vakken.
Je aanpassing ga ik eens op mijn gemak uiptroberen, dank hiervoor! Degene voor wie de website is, vind het niet zo erg, omdat het in FF wel goed te zien is (IE weet ik niet!!), maar ik vind het niet kunnen ;)
Ik ga dus kijken wat en hoe het wordt met je aanpassing.
 
Laatst bewerkt:
Ik kan de tweede foto ook deels in firefox reproduceren door een grote screenwidth te simuleren. Lijkt op een verschil met wanneer een newline automatisch wordt ingevoegd:

zelfgemaakt voor
dieren <--probleem

zelfgemaakt
voor dieren <-- werkt als boven

maar lijkt niet exclusief een probleem voor chrome

In Firefox is het wel mooi en gelijk, in Chrome en Chromium niet. Zie dus de screenshots van mij. Ik begrijp daarom je post niet helemaal? Kan je het uitleggen wat je bedoeld?
 
In mijn firefox heb ik hetzelfde probleem als jij met chrome hebt, zoals ik aangaf in mijn post.

Je kan het zelf testen in responsive design mode (CTRL-SHIFT-M) en dan een groot beeldscherm size kiezen en naar beneden scrollen. Je zult dan exact hetzelfde probleem zien dat je in chrome hebt, maar dan in firefox (in ieder geval met mijn built van firefox).

edit: mint + firefox 60

hm34.jpg
 
Laatst bewerkt:
Kan je hiermee verder...
Code:
#services .service-icon {
  font-size: 24px;
}
#services .service-icon h3 {
  height: 2.2em;
}

edit: je kan het derde plaatje op een smalle view centreren, staat wat netter :)
Code:
@media (min-width:768px) and (max-width:991px) {
  #services .service-box:nth-child(3) {
    margin-left: 25%;
  }
}

:thumb: voor het uitzoeken van een Bootstrap theme.

Suc6. Have fun.
 
Laatst bewerkt:
In mijn firefox heb ik hetzelfde probleem als jij met chrome hebt, zoals ik aangaf in mijn post.
Ik werk met Linux Mint 18.3 en wellicht is dat een verschil in FF?

Ik heb gedaan wat je zei Wampier (maar dan even op mijn laptop) en zie de screenshot:

voucher22.jpg

en zo zie ik het dus ook op mijn tablet en als ik het theme in FF kleiner maak, dan ziet het er zo uit:

voucher23.jpg

Kies ik laptop met ctrl+shift+M (en ik zit nu op een laptop en het ziet er heel goed uit!!) dan ziet het er zo uit:
 

Bijlagen

  • voucher24.jpg
    voucher24.jpg
    56,4 KB · Weergaven: 40
Laatst bewerkt:
Bron:
Bedankt, ik ga eens neuzen in de style.css (tommy heeft al aangegeven waar!) en dan zal ik eens kijken of het werkt. Of kan ik dit ook neerzetten bij Extra CSS?

En ja, het is een mooi bootraps theme. ;)
 
De code van Bron in de extra CSS gezet en zie daar, ik doe op mijn laptop ctrl-shift-M en het is in orde:

voucher26.jpg

en ook in CHromium is het:

voucher27.jpg

Ik ben blij!!
 
Graag gedaan en suc6 met de websites :cool:
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan