I've run into an issue where my website looks perfect on a desktop browser, but when viewed on a mobile device, the background image messes up everything and the responsiveness is not achieved.
If you'd like to see the site in question, you can visit:
Below is the code I used for setting the background image in the body using CSS:
body {
/* Location of the image */
background-image: url('../img/image.jpg');
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This line ensures the background image rescales based on the container's size */
background-size: cover;
/* Set a background color that will be displayed while the background image is loading */
background-color: #464646;
background-color:#FFF;
font-family: 'Montserrat', sans-serif;
color: #3E404B;
}
The website appears fine on a desktop and adjusts well when resizing the page. However, there seems to be an issue with how it appears on mobile devices:
Here's how it looks on mobile:
Do you think the parallax code could be causing this issue?
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 10px 5%;
}
.slide {
box-sizing: border-box;
height: auto;
min-height: 100%;
min-width: 100%;
background-size: cover;
box-shadow: inset 0 10px 10px rgba(0,0,0,.3);
}
I would greatly appreciate any help or suggestions. Thank you!