Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • September 6, 2018 at 4:20 pm #1006701
    Dieter Greven

    Servus,
    I have a problem with the appearance of the Modal window with privacy and cookie info on mobile. My colors are completely wrong. I just can’t find a way to change them for the mobile version. Is there any way to do this seperately without changing the colors of my entire page?

    This is the page: https://dietergreven.de

    Thanks in advance…

    Dieter

    September 6, 2018 at 5:03 pm #1006741
    Victoria

    Hey Dieter,

    That can only be done with css.

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    September 6, 2018 at 5:49 pm #1006758
    Dieter Greven

    Hi Victoria, thx for your answer. I simply want to change the Background and font color in the mobile version only. Desktop version is okay.

    September 6, 2018 at 7:23 pm #1006788
    Jordan Shannon

    Hi,

    You would have to use media queries:

    @media only screen and (max-width: 767px)  {
.avia-cookie-consent{
background:red!important;
color:#fff!important;
}}

    Simply adjust the colors I have to fit your needs.

    Best regards,
    Jordan Shannon

    September 6, 2018 at 7:39 pm #1006795
    Dieter Greven

    Hi Jordan,

    thank you for your answer. Your code changes the colors of the consent bar but my problem is the modal window in the mobile version.

    Looks like this on mobile

    September 7, 2018 at 6:02 am #1006903
    Rikard

    Hallo Dieter,

    Thanks for the feedback and screenshot, please try this instead:

    @media only screen and (max-width: 767px) {
.mfp-content .tab_inner_content p {
  color:#000 !important;
}
}

    Also make sure to clear cache and minification from any plugins you might be using.

    Best regards,
    Rikard

    September 7, 2018 at 9:24 am #1006967
    Guenni007

    did you write in any private area how the colors should be on mobile devices- i can not see your aim to obtain?

    September 7, 2018 at 9:35 am #1006983
    Guenni007

    Grüße aus Bonn nach Euskirchen!

    Wenn ich für die mobile Version sachen verändern möchte nehme ich mir die Developer Tools die es in den Browsern so gibt.
    Der Firefox zB hat “Bildschirm Größen Testen” oder alt cmd M – da kann man dann ein Handy auswählen, muss dann jedoch einmal den Inhalt refreshen. Dann kann man mittels “Element untersuchen” die Eigenschaften für das jeweilige Devise sehen.

    Man sieht dann zB was Enfold alles für Klassen an html anfügt für das jeweilige Device (hier mal iphone) bzw sogar Browserverwendung zB:
    html avia_mobile avia-safari avia-safari-602
    habe die anderen Klassen weggelassen die mit dem Device nichts zu tun haben.
    Eine Klasse setzt Enfold immer bei Verwenugng von Mobilen Endgeräten: avia_mobile

    sodass man im Prinzip garnicht über das media-Query der Weite gehen muss – sondern mittels der html klasse ganz vorne gezielt Änderungen an Mobilen Endgeräten setzen kann . z.B:

    .avia_mobile  .avia_cookie_text {
  color:#000!important;
}

.avia_mobile .avia-cookie-consent {
  background-color: #ff892e !important;
}

    das heißt hier wird wirklich nur für mobile Endgeräte die Schriftfarbe geändert, nicht wenn Du das Browserfenster schmal ziehst.

    ___________ english Version: ________

    Greetings from Bonn to Euskirchen!

    If I want to change things for the mobile version I use the developer tools which are available in the browsers.
    The Firefox e.g. has “screen size test” or alt cmd M – there you can select a mobile phone, but you have to refresh the content once. Then you can use “Examine element” to see the properties for the respective foreign currency.

    You can see for example what Enfold adds to html for each device (here iphone) or even for browser use:
    html avia_mobile avia-safari avia-safari-602
    have omitted the other classes that have nothing to do with the device.
    One class always sets Enfold when using mobile devices: avia_mobile

    so that in principle you don’t have to go beyond the media query of the distance – but can use the html class right at the front to make targeted changes to mobile devices . e.g:

    .avia_mobile  .avia_cookie_text {
  color:#000!important;
}

.avia_mobile .avia-cookie-consent {
  background-color: #ff892e !important;
}

    this means that the font color is really only changed for mobile devices, not if you narrow the browser window.

    September 7, 2018 at 1:05 pm #1007093
    Dieter Greven

    Hello Rikard,
    your answer solved my problem. Many thanks for that! Sorry for my late reply, I have to work sometimes. ;-)

    Hallo Guenni,
    besten Dank für deine ausführliche Anleitung und schöne Grüße nach Bonn! Ich nutze Chrome, bin im Prinzip ganz fit, was die Console betrifft, konnte aber hier ausnahmsweise keine Lösung finden. Vielleicht sollte ich es ja auch mal mit Firefox versuchen. ;-)

    I very appreciate your help guys!

    Best regards
    Dieter

    September 7, 2018 at 3:57 pm #1007159
    Rikard

    Hallo Dieter,

    Great, glad you got it working and that you got some work done :D

    Please let us know if you should need any further help on the topic or if we can close it.

    Gruss,
    Rikard

    September 7, 2018 at 5:24 pm #1007208
    Dieter Greven

    Hallo Rikard,
    I’m very okay with the solution, so the topic can be closed. Thank you.

    Gruss
    Dieter

    September 7, 2018 at 7:03 pm #1007252
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Modal window with privacy and cookie info on mobile’ is closed to new replies.