Ondersteuning » Thema en CSS/opmaak » Texture overlay background werkt niet op mobiele site

  • Opgelost yonifiene

    (@yonifiene)


    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]

9 reacties aan het bekijken - 1 tot 9 (van in totaal 9)
  • Moderator Jeroen Rotty

    (@jeroenrotty)

    Support Moderator

    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.

    Thread starter yonifiene

    (@yonifiene)

    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 6 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.

    Moderator Jeroen Rotty

    (@jeroenrotty)

    Support Moderator

    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.

    Moderator Jeroen Rotty

    (@jeroenrotty)

    Support Moderator

    Of zoals m’n eerste optie, gewoon de originele foto wijzigen en het effect daarop doen…

    Jeroen

    Thread starter yonifiene

    (@yonifiene)

    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 bedankt

    Fijn om te horen! Graag gedaan.

9 reacties aan het bekijken - 1 tot 9 (van in totaal 9)
  • Het onderwerp ‘Texture overlay background werkt niet op mobiele site’ is gesloten voor nieuwe reacties.