Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • July 6, 2017 at 1:26 pm #817229
    Nik

    Hallo,

    ich habe folgendes Problem: ich möchte, dass eine color-section in der mobilen Version ein anderes Bild hat, als in der Desktop Version.
    Die Color-Section hat die ID: #wasser

    Custom CSS:

    @media only screen and (max-width: 480px) {
#wasser {
background url(https:/xxx.de/wp-content/uploads/2017/06/wasser_mobile-1.jpg) !important;
}}

    Wenn ich mir das Layout im Browser anschaue (das Fenster schmaler mache) funktioniert das auch einwandfrei. Auch wenn ich
    im “Customizer” auf die Simulation (Smartphone) klicke, sieht es gut aus.

    Allerdings funktioniert es nicht in der realen Umgebung, also auf dem Smartphone.

    Was mache ich falsch?

    Danke & Gruß,

    Nik

    • This topic was modified 7 years, 4 months ago by Nik.
    July 6, 2017 at 2:43 pm #817281
    tjswarbs78

    Hi,
    Ich spreche nicht Geramn so habe ich durch Google übersetzt.

    Von der Suche nach dem Code scheint es, dass ein Halbkolon fehlt.

    Versuchen

    @media only screen and (max-width: 480px) {
#wasser {
background: url("https://fritzhoffmann.de/wp-content/uploads/2017/06/wasser_mobile-1.jpg") !important;
}}

    Ich hoffe, das hilft

    TJ

    July 6, 2017 at 2:48 pm #817284
    Yigit

    Hi!


    @tjswarbs78     Danke schoen! :)

    Cheers!
    Yigit

    July 6, 2017 at 7:40 pm #817470
    Nik

    Hey guys!

    @tjswarbs78    : this is the reason why i like enfold support so much. If moderators are too busy,
    forum members help you. That´s the way it should be. Thanks @tjswarbs78!
    :)

    I already used the script with ”
    but it still does not work.
    if you take a look at the picture https://fritzhoffmann.de/wp-content/uploads/2017/06/wasser_mobile-1.jpg
    you will learn that this image is not shown on mobile devices.

    what i do not understand: it works fine if you test it in a browser, the big image (landscape/desktop version)
    is being replaced with the smaller image (portrait)

    Any ideas? German or English. Whatever you guys prefer ;)

    • This reply was modified 7 years, 4 months ago by Nik.
    July 7, 2017 at 10:07 am #817708
    tjswarbs78

    Morning Nik,

    It is a nice helpful environment here :)
    I help out as a way of giving back to the guys at Enfold, plus i get to learn a lot about the theme from helping others.

    I’m not sure why the preview panel shows the code working but not on a page.
    Could you post a link to the page that is causing issues? It would be easier to inspect the code on a live page.

    The only other I think of is that the media query value is too small. maybe try 990px??

    Thanks

    TJ

    July 7, 2017 at 12:20 pm #817796
    Nik

    deleted

    • This reply was modified 7 years, 4 months ago by Nik.
    July 7, 2017 at 12:23 pm #817798
    Nik

    deleted

    • This reply was modified 7 years, 4 months ago by Nik.
    July 7, 2017 at 1:16 pm #817814
    tjswarbs78

    Hey,

    Does the issue only happen on the wasser ID?
    There doesn’t appear to be anything wrong with your css.

    I’ve played with the live code managed to get the image changing at 480px

    Image one – NO break at 480 so main image showing

    image two – break at 480 so mobile image shows

    this last image is a curve ball (does that expression translate into German?)
    It show the main image on mobile but uses cover to align image
    image – break at 480 with main image but using cover.

    Put your css back to how it was originally and see if it matches my css in the screen shots

    You may or may not know but if your are using Chrome you can right click a page the inspect. This allows you to change the live code and see what is / isn’t working.

    See how this helps and get back to us.

    TJ

    July 8, 2017 at 4:30 am #818045
    Rikard

    Hi @nik,

    Did you try the suggestion above and did you have any luck with it? Thanks for helping out @tjswarbs78 :-)

    Best regards,
    Rikard

    July 8, 2017 at 7:11 am #818099
    Nik

    Hi!
    is there a difference between

    background: url
    and
    background-image: url
    ??

    I have seen that you added
    background-size: cover!important;
    in the code

    i will check it now on my android device if this changes anything

    UPDATE: sorry. it works fine in simulation mode (browser resizing) but not on a real phone.
    Can you guys check that on your device maybe? I made a hard refresh, cleared the cache.
    no luck :(

    it also does not work with the other color sections (#stuck, #tapete for example)

    • This reply was modified 7 years, 4 months ago by Nik.
    July 10, 2017 at 10:03 am #818619
    tjswarbs78

    Hi,

    There is no difference in the out-put between background and background-image.
    There are several background properties that can be targeted…

    background-color
    background-image
    background-position
    background-repeat
    background-attachment
    background-clip
    background-origin
    background-size

    Rather than writing a rule for each one you can use background as a shortcode ie background: red url(web-here) top center fixed ;
    It saves time coding and test show browser render it quicker.

    I’ll check on my mobile this morning and get back to you

    Thanks
    TJ

    July 10, 2017 at 10:31 am #818623
    Nik

    Hey TJ,
    thanks for your efforts. I am wondering if my mobile background image for mobile devices has not the right resolution. it is a 480×640 px image.

    July 10, 2017 at 12:33 pm #818681
    tjswarbs78

    Hey,

    I’ve stuck all your images desktop and mobile into a fiddle

    The code is working fine. All images cut off at the breakpoints. I’ve checked in my browser and too and the cutoffs work fine. You’re correct though that on mobile (I checked on my Galaxy Note 3) none off the mobile images show which is rather odd.
    Have you tried clearing all the custom css apart from the css controlling the mobile images?
    Just by looking at the code in chrome I’m stumped as to the casue.

    The next step would be asking for a temp login so someone can have a look at the backend but a moderator would have to do that.
    I’m just a helpful user and not a moderator :)

    Thanks

    TJ

    • This reply was modified 7 years, 4 months ago by tjswarbs78.
    July 10, 2017 at 1:15 pm #818706
    Nik

    Hey TJ,

    would it help you if i give you my login for the template.
    maybe something is wrong beside the code?
    Just give me your email adress i´ll send you my login

    THANK YOU SO MUCH.

    Nik

    July 10, 2017 at 2:09 pm #818732
    tjswarbs78

    Is the backend all in German?

    TJ

    July 10, 2017 at 3:23 pm #818798
    Nik

    i have switched the language from GERMAN to ENGLISH if that helps ;)

    July 10, 2017 at 4:01 pm #818827
    tjswarbs78

    Hopefully this won’t go against any rules but ok. email some login details to (Email address hidden if logged out)

    Thanks

    TJ

    July 11, 2017 at 8:50 am #819162
    Ismael

    Hi,

    What is the actual device or mobile phone that you’re using? The view port 480px is a bit too small and it might only work on portrait mode. If you have an iPhone, please refer to the following link for the correct css media queries.

    // http://stephen.io/mediaqueries/

    Best regards,
    Ismael

    July 11, 2017 at 11:01 am #819227
    Nik

    Hi Ismael,

    thanks for your reply and the link. I decided to make 2 different color sections (desktop/mobile)
    and i will controll that with the following script

    @media only screen and (max-width: 480px) {
#wasser {
display:none !important;
}
}

@media only screen and (min-width: 480px) {
#wasser {
display:none !important;
}
}

@media only screen and (max-width: 480px) {
#wasser_mobile {
display:block !important;
}
}

    because the simulator (browser) does not work. my code seems to be clean but nobody could help me.

    THANKS AGAIN TO TJ! HE REALLY TRIED TO HELP ME OUT.

    NIk

    July 12, 2017 at 4:42 am #819766
    Rikard

    Hi Nik,

    Thanks for the feedback. Please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

    July 12, 2017 at 9:53 am #819890
    Nik

    Hey,
    you can close this topic.
    .
    thanks.

    July 12, 2017 at 10:47 am #819907
    Sarah

    Will do.

    Just as a reminder: you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/

    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/

    For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you.

    Thank you for using Enfold.
    Cheers!
    Sarah

  • Author
    Posts
Viewing 22 posts - 1 through 22 (of 22 total)
  • The topic ‘How to set a different bg-image (color section) on mobile devices?’ is closed to new replies.