Home Forums Weaver Xtreme Theme Parallax problem

Topic Resolution: Resolved

This topic contains 7 replies, has 3 voices, and was last updated by  scrambler 1 week, 5 days ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #52315

    Nele
    Participant

    Homepage: https://gvsonline.eu/ausland/

    The parallax images shows up as fixed images on small tablet and mobile. Can I change this?
    And if it works then: How can I change the visible height of the image on small tablet and on mobile?

    I read the tutorial about it, but I am still lost with this issue….

    #52324

    scrambler
    Moderator

    I believe some tablet / mobile OS have issues with the parallax CSS (don’t support it)

    You can definitely add CSS to change the parallax background image on mobile using the mobile selectors like .is-mobile (phone and small tablets), or .is-phone and .is-smalltablet

    You do need to inspect the page to find the rest of the selector allowing you to target a specific parallax area.

    For example the parallax area of the teacher with the two kids has the background image on the selector .parallax#post-1615-p

    So the rule below would change that image on phones

    .is-phone .parallax#post-1615-p {background:{url(ImageURL);}

     

    #52332

    Nele
    Participant

    Why do I have to put the URL again into this role? Shall I do it like this: .is-smalltablet .parallax#post-1615-p {background:{url(URL); height: 300px; }
    And something more: When I put it into the CSS the green div area just below the header area lost its color.

    #52349

    Nele
    Participant

    @weaver, I will work with your information and will try to solute this stuff with mobile selectors. Maybe I do not need to write again…   🙂

    #52352

    Weaver
    Keymaster

    Just a note – you’ve been getting help from scrambler, and not me, weaver. Just wanted to acknowledge his efforts.

    #52354

    scrambler
    Moderator

    “Why do I have to put the URL again into this role? Shall I do it like this: .is-smalltablet .parallax#post-1615-p {background:{url(URL); height: 300px; }
    And something more: When I put it into the CSS the green div area just below the header area lost its color.”

    I do not understand what you mean.

    If you want a different image for phones or smalltablet, then you need to specify the URL for that image in the rule I gave you …

    So if you only want a different image for smalltablet (not phones) it would be the rule you mentionned, replacing URL by the actual URL of the image you want to use on small tablet. Also use min-height instead of height as this is how the default rule sets the height.

     .is-smalltablet .parallax#post-1615-p {background:{url(URL); min-height: 300px; }

    If it causes a problem, post back with the rule in place so we can inspect the page and find out what is going on.

    #52376

    Nele
    Participant

    Thank you @scrambler. But this causes a lot of problems. So I will change everything and put in a fixed picture when the screen gets smaller. This is also okay for me.

    #52380

    scrambler
    Moderator

    The rule I gave you should just replace the background image use by default to a different one, so I don’t know what you mean by problems.

    We can only help, if you explain what the problem is, or what it is exactly that you are trying to achieve…

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.