Texture overlay background werkt niet op mobiele site
-
Hallo,
Ik ben sinds kort bezig met het maken en onderhouden van mijn website via wordpress.
Nu loop ik tegen het volgende probleem aan:
Op mijn homepage heb ik een beeldvullende foto met daarover een transparante laag (texture overlay) zodat de tekst beter leesbaar is. Ik heb deze foto toegevoegd via ‘nectar slider’ en heb de optie ‘add texture overlay to background’ aangevinkt. Tot dusver niks aan de hand en werkt het perfect op de desktop verie van mijn website. Maar zodra ik via mijn mobiele telefoon de pagina open is de transparante laag (texture overlay) verdwenen waardoor mijn tekst amper te lezen is..Heeft iemand enig idee hoe ik dit kan verhelpen?
Ik gebruik overigens de salient child theme
De pagina waar ik hulp bij nodig heb: [log in om de link te zien]
-
Het enige die ik je zou aanraden is niet op die manier te gaan werken, maar de effectieve achtergrondfoto te gaan aanpassen en daarop die zwarte goed te steken. Zo heb je altijd op ieder toestel hetzelfde.
Jeroen
Voeg onderstaande even toe aan de css van je child theme of via “Weergave” > “Customizer” > “CSS Editor” in je WordPress admin:
@media only screen and (min-width : 1px) and (max-width : 1000px) { .video-texture { display: block !important; } }
De eigenschap ‘!important’ wordt hier misbruikt maar dat komt omdat je thema die al eerder misbruikt waardoor je hierop terug moet vallen.
Bedankt! Het werkt nu perfect op mobiele weergave. Alleen niet wanneer ik op de iPad, zodra ik deze in liggende weergave draai. In de normale houding werkt het wel goed!
*de url is inmiddels gewijzigd in https://www.ymediageneration.nl
-
Deze reactie is gewijzigd 7 jaren, 2 maanden geleden door
yonifiene.
Ik zie het ja, komt door een extra css eigenschap die wederom de zwarte overlay verbergt.
Wijzig mijn eerdere stuk css naar het volgende:
@media only screen and (min-width : 1px) and (max-width : 9999px) { .video-texture { display: block !important; } }
Zoals je misschien al ziet wijzig je de maximale breedte van je viewport naar 9999px. Als het goed is zou die dan ook op tablet goed moeten gaan.
Of gewoon zonder media query?
Jeroen
Kan ook, maar dan moet je die functionaliteit uit je thema slopen. Vaak meer werk en bug gevoeliger dan wanneer je de standaarden van je thema aanhoudt. Snap sowieso niet waarom het thema dit soort zaken gaat verbergen als er expliciet een optie is om het aan te zetten. Je zou dan verwachten dat er een optie is die het voor mobiel instelbaar maakt.
Of zoals m’n eerste optie, gewoon de originele foto wijzigen en het effect daarop doen…
Jeroen
Werkt helemaal perfect nu! Hartstikke bedankt
Jeroen Rotty (@jeroenrotty)
2 uur, 42 minuten geleden
Of zoals m’n eerste optie, gewoon de originele foto wijzigen en het effect daarop doen…Jeroen
Dit had je ook kunnen doen. Was een net zo’n goede oplossing geweest, echter dien je dan elke foto vooraf te bewerken voordat je deze upload wat een extra stap betekend en daarnaast kennis vergt over Photoshop of ander grafisch programma. Naar mijn ervaring is deze kennis lang niet altijd aanwezig.
yonifiene (@yonifiene)
6 minuten geleden
Werkt helemaal perfect nu! Hartstikke bedanktFijn om te horen! Graag gedaan.
-
Deze reactie is gewijzigd 7 jaren, 2 maanden geleden door
- Het onderwerp ‘Texture overlay background werkt niet op mobiele site’ is gesloten voor nieuwe reacties.