Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 25, 2016 at 1:13 am #677288
    ClapperConsulting

    I’ve added a media query at 479px to swap the background image on a “Color Section”

    If you make the screen smaller on a desktop, the image swaps out correctly. However, on an actual mobile device, the background, background-image, or background-position properties do not take. Mobile shows the same image as full-width desktop.

    I’ve successfully tested changing the color on an h1 tag in the same element at the same media call to verify this isn’t a cache issue.

    Does another class override the background properties on mobile?

    August 29, 2016 at 8:19 am #678762
    Ismael

    Hi ClapperConsulting!

    Thank you for using Enfold.

    What is the screen resolution of the mobile device? Or its actual model? Proper css media query for iPad and iPhones: http://stephen.io/mediaqueries/

    Cheers!
    Ismael

    August 30, 2016 at 1:41 am #679223
    ClapperConsulting

    Hi Ismael,

    It’s an iPhone 5 that I’m testing on, though I’m told iPhone 6 is not seeing the background property change either.

    The media call is working as I can change other elements that do show up on the phone.

    September 1, 2016 at 2:53 pm #680753
    Andy

    Hi,

    use this code:

    @media screen and (max-width: 479px) {
.page-id-861 #intro {
background-size: 376px 677px !important;
}}

    and adjust as needed.

    Best regards,
    Andy

    September 3, 2016 at 4:13 am #681519
    ClapperConsulting

    Hi Andy,

    That code performs as expected but ONLY on a desktop. If you view a page with the code on a mobile device – not on a mobile emulator, the code does not get applied. I’ve now tried on an iPhone 5S w/ Safari and a Galaxy S4. Both do the same thing. Though, the S4 seems like it reads the code at first, then reverts back to the original background properties.

    Something is preventing or reverting the code when the physical device is a mobile device.

    I can’t leave your code on the live page, but created a test page noted below: View it on a desktop or emulator and you’ll see the background distort below 479px due to the code you provided (changed to match the page-id). But, if you visit the site from an actual phone, the background does not distort. Showing that the .css property is being applied at the correct media query, but not being applied specifically on a phone.

    • This reply was modified 7 years, 8 months ago by ClapperConsulting. Reason: Clarifying that what the code is doing isn't the issue. The issue is that the code is not applying a device that is a phone
    September 5, 2016 at 3:05 pm #682199
    Andy

    Hi,

    please try this code instead:

    @media only screen and (max-width: 736px) {
.page-id-861 #intro {
background-size: 376px 677px !important;
}}

    Best regards,
    Andy

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.