Community Forums › Forums › Archived Forums › General Discussion › Altitude Pro – Genesis – Images Optimized for Mobile
Tagged: media queries
- This topic has 11 replies, 2 voices, and was last updated 4 years, 9 months ago by
kimsmall10.
-
AuthorPosts
-
April 26, 2020 at 11:13 am #498203
kimsmall10
ParticipantHi:
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.comApril 26, 2020 at 6:22 pm #498206AnitaC
KeymasterIn 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.
April 26, 2020 at 7:09 pm #498207kimsmall10
ParticipantHi 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;
}*/
}April 26, 2020 at 7:37 pm #498208AnitaC
KeymasterDid you clear cache? Do you have any caching plugins in the site?
Need help with customization or troubleshooting? Reach out to me.
April 26, 2020 at 7:53 pm #498210AnitaC
KeymasterI cleared the cache on my phone and it's working.
Need help with customization or troubleshooting? Reach out to me.
April 26, 2020 at 7:53 pm #498211kimsmall10
ParticipantI did. Akismet? Search Engine Visibility? Should I deactivate?
April 26, 2020 at 7:55 pm #498212kimsmall10
ParticipantAhhhh, let me try again!
April 26, 2020 at 7:58 pm #498213kimsmall10
ParticipantNow the focal point changed for me! Oh boy. Not sure what is going on!
April 26, 2020 at 8:17 pm #498215AnitaC
KeymasterI 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.
April 26, 2020 at 10:38 pm #498217kimsmall10
ParticipantHi 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!
April 27, 2020 at 10:45 am #498226AnitaC
KeymasterHi 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.
April 27, 2020 at 11:00 am #498228kimsmall10
ParticipantHi 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.
-
AuthorPosts
- The topic ‘Altitude Pro – Genesis – Images Optimized for Mobile’ is closed to new replies.