Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • July 9, 2015 at 8:21 pm #471115
    stupaul22

    Page in question is:
    SEE LINK BELOW IN PVT SECTION

    In the color section I placed a large image in the background. On ipad and smartphone I want the image to disappear.

    I added the following to the section ID box: attorney-back
    I put the following code on my child theme style sheet:

    @media screen and (max-device-width: 767px) {
	#attorney-back {
		background-image: none!important;
		background-color:#f8f8f8;
	}
}

    The styles work as expected when I test in a browser by closing the window.
    The styles do not work on iphone. The background image is still there. Was unable to test on ipad and android.

    WordPress adds the meta tag, its there:
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">

    I noticed that the background also does not drop out on iphone when I place the styles in the main section of my stylesheet. Why does the iphone dislike this style:

    	#attorney-back {
		background-image: none!important;
		background-color:#f8f8f8;
	}

    Thank you your help is greatly appreciated.

    July 10, 2015 at 7:55 am #471294
    Rikard

    Hey stupaul22!

    Please try the following instead:

    @media only screen and (max-width: 767px) {
	#attorney-back {
		background-image: none!important;
		background-color:#f8f8f8;
	}
}

    Best regards,
    Rikard

    July 10, 2015 at 8:48 pm #471717
    stupaul22

    Thanks Rikard,

    This code does not solve the issue. I searched around a lot and tried many variations of the css before I made the post. Do you have any other insight?

    July 12, 2015 at 10:36 am #471998
    Rikard

    Hey!

    Your code is working on my end now, I’m guessing you managed to get it fixed? If you can’t see the changes then please try to flush your browser cache and reload a few times.

    Cheers!
    Rikard

    July 12, 2015 at 9:36 pm #472091
    stupaul22

    Yes I did a work around. I removed the background image from the color section and re-placed them on my child theme style sheet:

    @media only screen and (min-width: 768px) {
	#attorney-hanley {
		background-attachment: fixed;
 		background-image: url("http://portersimon.com/wordpress/wp-content/uploads/Hanley2.jpg");
    		background-position: right top;
    		background-repeat: no-repeat;
		background-size: cover !important;
	}
	#attorney-brown {
		background-attachment: fixed;
 		background-image: url("http://portersimon.com/wordpress/wp-content/uploads/Brown1.jpg");
    		background-position: right top;
    		background-repeat: no-repeat;
		background-size: cover !important;
	}
}
  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘custom id attribute not working on iphone’ is closed to new replies.