Altitude Pro – Genesis – Images Optimized for Mobile

[kimsmall10]

Hi:

Anyone know how to make all 7 front page images have a fixed background on mobile devices as they do on a desktop so they scroll the same. Currently they are static on mobile.

Thank you.

https://kimsmallluxuryhomes.com

[AnitaC]

In the stylesheet look for this:

@ media only screen and (max-width: 1280px) {
	.site-inner,
	.wrap {
		max-width: 1140px;
	}
	.front-page-1,
	.front-page-2,
	.front-page-3,
	.front-page-4,
	.front-page-5,
	.front-page-6,
	.front-page-7 {
		background-attachment: scroll;
	}
}

Comment out the front-page lines like this:

@ media only screen and (max-width: 1280px) {
	.site-inner,
	.wrap {
		max-width: 1140px;
	}
	/*.front-page-1,
	.front-page-2,
	.front-page-3,
	.front-page-4,
	.front-page-5,
	.front-page-6,
	.front-page-7 {
		background-attachment: scroll;
	}*/
}

You'll see the /* and the */ in there. Then clear the cache to see if it works.

---

Need help with customization or troubleshooting? Reach out to me.

[kimsmall10]

Hi Anita: Thank you so much for your reply, but that is not working. I tried the root after the max width 1140px, also with no luck.

@media only screen and (max-width: 1280px) {
.site-inner,
.wrap {
max-width: 1140px;
}
}

@media only screen and (max-width: 1200px) {
.site-inner,
.wrap {
max-width: 960px;
}
.site-header .widget-area {
width: 580px;
}
.content {
width: 520px;
}
.full-width-content .content {
padding: 0 110px;
}
.genesis-nav-menu a {
padding: 30px 10px;
}
.site-header.dark .genesis-nav-menu a {
padding: 20px 10px;
}
/*.front-page-1,
.front-page-2,
.front-page-3,
.front-page-4,
.front-page-5,
.front-page-6,
.front-page-7 {
background-attachment: scroll;
}*/
}

[AnitaC]

Did you clear cache? Do you have any caching plugins in the site?

---

Need help with customization or troubleshooting? Reach out to me.

[AnitaC]

I cleared the cache on my phone and it's working.

---

Need help with customization or troubleshooting? Reach out to me.

[kimsmall10]

I did. Akismet? Search Engine Visibility? Should I deactivate?

[kimsmall10]

Ahhhh, let me try again!

[kimsmall10]

Now the focal point changed for me! Oh boy. Not sure what is going on!

[AnitaC]

I would go back to the very first suggestion I gave. Seems you might have changed something else. It was working with my code using my browser tools.

---

Need help with customization or troubleshooting? Reach out to me.

[kimsmall10]

Hi Anita:

Thank you.

I copied the original code into the css from the them file and went through the process of adding my background images back in, then went through the process of adding front pages 2, 4, and 6. The website works perfectly on a desktop but not on a mobile device.

I am not sure how to fix this now. I added in Sridhar Katakam's code for "How to edit Altitude Pro’s style.css to fix the background images’ loading problem," yet I still can't get the images into focus on a mobile device, or with a fixed background with the code you suggest.

@media only screen and (max-width: 1280px) {
.site-inner,
.wrap {
max-width: 1140px;
}
}

@media only screen and (max-width: 1200px) {
.site-inner,
.wrap {
max-width: 960px;
}
.site-header .widget-area {
width: 580px;
}
.content {
width: 520px;
}
.full-width-content .content {
padding: 0 110px;
}
.genesis-nav-menu a {
padding: 30px 10px;
}
.site-header.dark .genesis-nav-menu a {
padding: 20px 10px;
}
/*.front-page-1,
.front-page-2,
.front-page-3,
.front-page-4,
.front-page-5,
.front-page-6,
.front-page-7 {
background-attachment: scroll;
}*/
}

Sridhar's code to fix the issue -

.front-page-2,
.front-page-3,
.front-page-4,
.front-page-5,
.front-page-6,
.front-page-7 {
/*border-top: 54px solid transparent;
margin-top: -54px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
position: relative;*/
z-index: 9;
}

Please let me know if you see anything incorrect.

Thank you!

[AnitaC]

Hi Kim,

As I mentioned before, I think you were having a caching issue. And you are changing your code because you cannot see it because the code is cached. What I provided to you works so as suggested, remove all third party code. Go back to the original code and start there. But again, it's all moot if you have a caching plugin in there that's not clearing things.

---

Need help with customization or troubleshooting? Reach out to me.

[kimsmall10]

Hi Anita:

Thank you, but I tried looking at my site from a completely different mobile device this morning that has never visited my site and the problem persists.

I have gone back to the original code and started from scratch, twice. The issue now is the zooming of the front page images as well as not scrolling on a mobile device.

I have also deactivated all plugins.

I even tried adding additional CSS for background-image, which didn't work, either.

I appreciate you trying to assist me with this, but nothing is working.

[Author]

Posts