[Paul T]

ops… my site is: franciscanfriars.org

[Paul T]

really, i’ve tried over a half dozen times… i’ve even verified my username and password, I can login to wordpress, but when i try to leave you a review, and login with the same username and password that worked on wordpress, it will not work to leave you a review…

if it is still my user error, we can just let it go, but I bring it up in case there is something that is preventing you from getting more favorable reviews!

Peace

[Paul T]

Hello Skandha,
I tried to follow the link to leave a review… I can’t get in… It is asking for my WordPress login, which seems weird, but even so when I entered that it refused to accept.. yet I’m sure I put in the correct info!

[Paul T]

Bravo Skandha!! Very good job… yes it was a conflict with a plugin. I disabled that plug in and all is well.. By the way in case it helps anyone, the plugin was Livemesh Site Origin Widgets.
Thanks!

[Paul T]

It works for desktop computer, and my android tablet… (this is an improvement, THANKS!), but it still does not work for iphone with ios11.3. No “Older Posts” scroll button is displayed.

Note: A DIFFERENT issue: Also of interest, on my iphone the slider image does not work… it only shows the first of my several images and never changes, nor are the slider arrows functional.

[Paul T]

Sorry about the numerous posts… just checked the above code on a larger ipad (approx 1600 x 2024) and the same problem occurs even with this.. that is the background image is a blow up of a small portion.. not the whole image. So basically, it really seems that the “fixed” background image feature (which allows featured content icons to scroll across image) simply cannot work for iphone/ipad. Would you agree with that assessment? Will the next update of the theme fix this? (Or is there a css code that says if apple operating system background image = scroll, else background image = fixed?? smile).

[Paul T]

Greetings Tikaram,

after i posted the above I got thinking about it… and i tried the following:

@media only screen and (max-width: 812px) {
#featured-content.background-image {
background-attachment: scroll;
}
}

@media only screen and (min-width: 813px) {
#featured-content.background-image {
background-attachment: fixed;
}
}

It seems to work!!! So I think I’m good.. but would love to know if you agree this is the best fix.. or if I should fix it another way… (I do worry about the large amount of added CSS Code affecting my website speed..) Also will the next version of the theme fix this issue??? when is that due?? thanks.

[Paul T]

So Tikaram, I think we are going a bit backwards here… sorry.. let me explain

The above fix indeed achieves what I am looking for, the featured content icons to scroll over the fixed background image, but adding that re-intruduces my old problem of the image does not show properly on iphone/ipad…(it expands the image to such an extent it is really unviewable..) recall the above fix you gave me on Dec 4.. updating to 2.5 and adding:

@media only screen and (max-width: 812px) {
#featured-content.background-image {
background-attachment: scroll;
}
}

That allows the image to show up correctly on iphone/ipad… but is seems that the “cost” is that I lose the scrolling effect on larger screen???? So right now it seems like I have two choices neither of which really words: I have the “fixed” css code that makes the image fixed and the content to scroll like i like on big screen, but not be viewable on iphone/ipad… or I can use the css code “scroll” which allows the image to be viewable on iphone/ipad but not have the scrolling effect I was hoping for.

Does this make sense??

if this helps: On franciscanfriars.org I have the CSS code you gave me on Dec 4.. and on test4.franciscanfriars.org i have the code you just gave me… neither is totally correct.

[Paul T]

I just noticed on my website that in the featured content area, the featured content icons are not scrolling over the background image (with background image staying fixed, and the website scrolling over it) . When I first chose this them.. I was using and loved that feature…

I am aware this is a setting.. Apprearance==>Customize==>Featured Content==>Background image settings==>attachment==>Fixed (or scroll)… I have it on fixed (I think the correct one) but I’ve tried scroll too.. no difference.

I’m not sure when it stopped doing this… after the update to 2.5 or after the last custom CSS you gave me. (However I took that custom CSS out just as a test, and the content still does not scroll over the background image.)

Any ideas? Thanks

[Paul T]

Eureka! This works! Thanks!!!!!!!!!

[Paul T]

I have cleared the browser cache… and also used Safari, Chrome, and Firefox browsers…. the problem still persists on the iphone….

again, here is screenshot…
https://1drv.ms/i/s!AsmfjxPBKWvlgoU9GA7tmz1e7XWrqg

thanks.

[Paul T]

I updated to 2.5.
Problem fixed on iPad… thanks..
Image is still not correct on iphone… see screenshot:
https://1drv.ms/i/s!AsmfjxPBKWvlgoU9GA7tmz1e7XWrqg

Again website is franciscanfriars.org

[Paul T]

When I try to update theme (from dashboard, and update themes, I select Adaptive Pro) I get an error message saying “update package not available”.

any ideas?

[Paul T]

Here is a photo of android tablet on left, ipad on right:

Note.. I’m not sure how to post an image here.. but here is a link to it:
https://1drv.ms/i/s!AsmfjxPBKWvlgoRiGW1ad_4VY0Ddvg

Here is the view on an android phone:
https://1drv.ms/i/s!AsmfjxPBKWvlgoRgdF0Mxbp8vYFwEw

Here is the view on an iphone:
https://1drv.ms/i/s!AsmfjxPBKWvlgoRhrXcmg80KSoYeuA

thanks.

[Paul T]

I have actually realized the problem I am seeing is unique to and Iphone or Ipad… ios…
The background image shows perfectly on andriod devices, but on a iphone the featured content background image is actually a very small portion of the whole image that is blown up – expanded so that it is un-viewable.. just super grainy.. whereas on android devices the background image is sized responsively to show all (or most of the entire image). Does that make sense?? if you look at francisanfriars.org on both android and ios I think you’ll see what I’m talking about…

[Paul T]

Ok… than yes, please give me the css to make the background all one color on mobile phone. Thanks

[Paul T]

OK Thanks… I found the problem to my upload speed problems… it really (as you suggested) had nothing to do with your theme. Your theme is looking and working GREAT!!!!! I LOVE THIS THEME! Bye.

[Paul T]

Turns out, the above code to get the infinite scroll (click) to work is still a bit off…

On the full screen it is fine, but on mobile or tablet the scroll bar has no padding between it and the top of the footer (which is actually the sidebar moved to the footer area on mobile device)….

This causes the scroll bar to look like the title for the footer… so it is easily missed.. can a bit of padding be added below the infinite scroll bar on mobile devices…

again, my site is currently test4.franciscanfriars.org and this is the CSS code I’m using that you gave me a week or so ago.. (Oct 27)

.catchadaptive-masonry #infinite-handle {
bottom: 15px;
position: absolute;
text-align: center;
top: auto;
width: 100%;
}

.catchadaptive-masonry #main {
position: relative;
}

#infinite-handle {
text-align: center;
position: unset;
}

Thanks.

[Paul T]

thanks, so then here is a Theme related question (as I try to minimize size of all my images):

I know your FEATURED SLIDER image recommended size is 1680 px by 720 px. That size looks nice on large screen, but on mobile phone and tablet, it is too small for me (in height). To get a size I like on mobile requires me to use an image bigger than 720 px in height for the Featured slider image I download.

Is there a way to download and use 1680 x 720 px image for the Featured Slider image, and just force the image to have a higher height on a mobile screen?

(I am guessing the answer is no, but thought I’d try!)

Thanks.

[Paul T]

That did not work for me….. I played around with it and got this to work

@media screen and (max-width: 467px) {
#promotion-message .section.left,
#promotion-message .section.right {
margin-top: -20px;
max-width: 100%;
}
#promotion-message .section.left {
padding-top: 30px;
}
}

There may be a better way to do it, if so I’m happy to hear.. but for now I hope I’m good.
Peace

[Author]

Posts