I am experiencing some responsive issues and wanted to know how to fix them. I'll be including supporting snapshots.
1. On mobile screens, the logo in the top menu is awkwardly low and part of it extends below the white background of that top menu. How do I fix that?
2. Is there a way to ensure that parallax images are centered or actually reduce in size to show the full image on handheld size screens? Right now it seems to just show the side of the photo which looks awkward.
3. Also bullet points look awkward when used in section content. It doesn't produce the visual effect desired when implementing an unordered (or ordered) list. There is no indentation of the content, it looks the same as anything else except there is a bullet point floating next to it. I'm going to remove for now, but would like to know how to fix this?
I have implemented this code, but there are now some new issues I am noticing. As before, I will include screenshots.
The parallax sections are now not showing up on mobile and tablet screens.
There is a parallax section towards the bottom of our homepage that contains some contact information. The background image is getting repeated and it looks pretty wonky. This multi image issue is showing up on desktop, tablet and smartphone screen sizes, but not on my laptop.
Also a new issue I've found is that the section content in the homepage contact section is showing up as the turquoise color. Before I had this as white and I was experimenting with a different off-white color to see if it would be more visible against the background. When I changed the color it started showing up as turquoise and now it won't change on the front end no matter what color I have it selected as.
Maybe you can change the parallax css from 1024px to 320px like my custom css below and check it to see any difference.
ul {list-style: none !important;}
@media only screen and (max-width: 320px){
.parallax {
background-size: contain !important;
background-attachment: fixed;
background-position: center center !important;
background-repeat: no-repeat;
}
}
@media screen and (max-width: 320px){
#header .navbar-brand {width: 80%;}
}
Honestly, the background parallax will cover the image, it can't reduce the width to fit for the screen because it will smaller than the title. If you want I can help you reduce it in small screen, but it will difficult to see your content.
I made that adjustment to parallax css, but it didn't work. I'm still not seeing those parallax sections on mobile and tablet screens. I was wondering if it would be possible to go back to the default and just make sure that background image stays centered instead of showing the left hand side of the image? I'm not interested in implementing a third-party parallax plugin.
Also, I'm still waiting for response to the these 2 issues that I described in my last comment:
There is a parallax section towards the bottom of our homepage that contains some contact information. The background image is getting repeated and it looks pretty wonky. This multi image issue is showing up on desktop, tablet and smartphone screen sizes, but not on my laptop.
Also a new issue I've found is that the section content in the homepage contact section is showing up as the turquoise color. Before I had this as white and I was experimenting with a different off-white color to see if it would be more visible against the background. When I changed the color it started showing up as turquoise and now it won't change on the front end no matter what color I have it selected as.
You can use fake email, I just need username and password with admin permission. I will check it with our developer and to save your time, I will update your website immediately when I and our developer discussion about your case.
If you don't want provide it, you can create a package site from duplicator plugin and provide it for me. I will check it on my server with our developer.
I can make this ticket to private or you can create a reply private with private option.
I had updated the background image in mobile screen now. The result will like my screenshot, it's the only thing I can do for you. Maybe you can check it?
Glad to see that those sections are now appearing on mobile, thank you!
However, it doesn't seem to have that parallax effect anymore. As I scroll down, the overlaid title doesn't move separate of the background image. Is this a result of fixing the background image for mobile screen sizes?
I tried updating it again, but the custom style still not update. I think there is cache script in your website or your hosting provider, maybe you can check it?
@media screen and (max-width: 568px){ #header .navbar-brand {width: 80%;} .section.parallax {background-position: center !important; background-attachment: fixed !important;} }
I'm still seeing responsive issues. I'm including snapshots showing these problems.
On the tablet:
1. The parallax section with "Our Services" on the home page is still not centered.
2. The H4 titles in the services section are overlapping the section content that is supposed to be below it.
3. There's extra space between Training & Consulting and Supervision. I'm assuming this is because they are in different rows within Visual Composer, but is there a way to set it so that we don't have that space when viewing on a tablet or smartphone?
4. In the Contact section with the parallax background on the homepage, the "Contact Information" H2 is oddly close to the section content.
On the smartphone:
The parallax sections on the homepage are super zoomed in now. You can't really make anything out. What's odd is that if I open up the website in a browser on my laptop and adjust the size manually (i.e. clicking on the corner of the browser and dragging) to roughly the size of a smartphone screen, the parallax sections on the homepage look how I want them. Do you know why this is?
For the "Our Services" title, I see it's center in my side, maybe you can check it with other browsers, because I can't reproduce this problem and it not happen in my side so I don't know how to check it for you.
For the problem with the "Contact Information" H2, I had tried update custom style:
For the problem with the parallax, I will check it in my server and get back for you soon, your server have cache feature, so it take long time to impact your website then I can't check it immediately now.
I had updated the new custom style for parallax, maybe it will need few hours to impact your website. Please clear caches and cookies then check it again.
Hey, I just wanted to say thank you again for all of your help. Your team has been really great!
I ran through the adjustments and the parallax sections look a lot better on tablet and mobile devices. However, I noticed a new issue (well actually it is something that happened before). The logo in the top menu overlay is low again and extending past the bottom of the menu. This is actually the first issue I had listed when I originally opened up the ticket. One of the recent changes must have nullified a correction we had made previously. I'll include a snapshot just in case.
So we've found that the issue with the logo is occurring on older phones, like the iPhone 5. Do you know why this is happening? Is it something that we can fix or would it be difficult to do?
Other issue:
Noticing that the top nav disappears when viewed on mobile screen that is held horizontally. Do you know what causes that?
However, I don't think that the issue with the nav that I am talking about has anything to do wp admin bar. What I am talking about is the fact that the nav disappears when you hold the phone sideways instead of upright. This happens on when viewed on any phone, such as a friend of mine that does not have access to the backend of the site.
Honestly, this isn't a huge deal, I'm just curious why this occurs when you flip the phone on it's side.
I just have one last thing I wanted to ask you about. When holding the phone sideways, the social links in the footer don't stay on one line. As usual, I'm including a screenshot. I was wondering if there is a way to make it so they stay together like they do when holding the phone upright?
I wanted to re-open this ticket so you could check something out for me. My business partner has informed me that she encountered an issue with the mobile version of the site.
Here's the situation:
She shared a link to the new website on her FB page. When she clicked on the link on her phone, she noticed two problems:
1. Black space appearing at the top of the homepage. This obscured the top nav but then it disappeared after she started scrolling.
2. She couldn't click on the phone number that's listed on the homepage and contact page.
What's odd is that I haven't experienced any of these issues. I've tried it on an iPhone 7 and iPhone 4. On both, I didn't see the black space and phone numbers were clickable. My business partner is using an iPhone 6. Could this simply be an issue with her phone specifically?
I'm including a snapshot she sent me showing the black space on the home page.
Thanks for checking this! I've also gone and tested this with a Samsung as well and haven't been able to reproduce the issues that she described to me. I was wondering if you have any theories that would explain why my business partner experienced this issue when it seems it's not occurring for anyone else?
With my knowledge, I think the problem with the caches - cookies or the problem come from this device. I'm not sure, it just my imagine about it. But I'm sure I can't reproduce this problem too.
I think I may know what is causing the issue and was wondering if you might know more. So it looks like this issue that my business partner reported (I'll include the screenshot) only happens when you are using the Facebook app on the phone. I had been using my phone's Safari browser to access FB and I never saw the issue. However, I was testing it on my friend's and they already had the FB app open. When I clicked on the link to our website, I was seeing the distortion that my business partner had described.
Would you know why/how the app may be causing this problem?
On the apps or browsers, when each device and each browser will have each section incorrect. The css and html always render correct, but to make it apply correct styles will need some knowledge and many test process.
I'm not understand your question clearly, I hope it's answer for your question.
Alright so that last bit of code that I added to the stylesheet did address the black bar issue, which is awesome! However, the phone number is still not clickable like it's supposed to be when navigating to the site from the FB app.
Wow seems like a pretty simple oversight on my part, but that is the power of having another pair of eyes reviewing your work. I've correctly added the links to the phone numbers listed on the site. Thank you for all of the help!
I am currently closing the ticket. Please don’t hesitate to submit a ticket whenever you need help. I will be happy to assist you.
P.S. I would appreciate if you could please rate the Theme and like the assistance under my support, means a lot to me. Thank you.
You can rate it with your themeforest account at your downloads page, precisely at this link: http://themeforest.net/downloads and hover over the 5 stars for our theme.
Hello again,
I am experiencing some responsive issues and wanted to know how to fix them. I'll be including supporting snapshots.
1. On mobile screens, the logo in the top menu is awkwardly low and part of it extends below the white background of that top menu. How do I fix that?
2. Is there a way to ensure that parallax images are centered or actually reduce in size to show the full image on handheld size screens? Right now it seems to just show the side of the photo which looks awkward.
3. Also bullet points look awkward when used in section content. It doesn't produce the visual effect desired when implementing an unordered (or ordered) list. There is no indentation of the content, it looks the same as anything else except there is a bullet point floating next to it. I'm going to remove for now, but would like to know how to fix this?
Thanks for the help!
Stephen
Hi,
Please add the css code in the path: Appearance -> Theme Editor -> Style.css, please put it in the end of the file:
ul {list-style: none !important;} @media only screen and (max-width: 1024px){ .parallax { background-size: contain !important; background-attachment: fixed; background-position: center center !important; background-repeat: no-repeat; } } @media screen and (max-width: 320px){ #header .navbar-brand {width: 80%;} }Best Regards,
Jelly Team
I have implemented this code, but there are now some new issues I am noticing. As before, I will include screenshots.
Hi,
Maybe you can change the parallax css from 1024px to 320px like my custom css below and check it to see any difference.
ul {list-style: none !important;} @media only screen and (max-width: 320px){ .parallax { background-size: contain !important; background-attachment: fixed; background-position: center center !important; background-repeat: no-repeat; } } @media screen and (max-width: 320px){ #header .navbar-brand {width: 80%;} }Honestly, the background parallax will cover the image, it can't reduce the width to fit for the screen because it will smaller than the title. If you want I can help you reduce it in small screen, but it will difficult to see your content.
If it still not working for you, I think you can try use third party plugin to do your parallax section, try one: https://wordpress.org/plugins/adamrob-parallax-scroll/.
Sorry for inconvenience.
Best Regards,
Jelly Team
Hello,
I made that adjustment to parallax css, but it didn't work. I'm still not seeing those parallax sections on mobile and tablet screens. I was wondering if it would be possible to go back to the default and just make sure that background image stays centered instead of showing the left hand side of the image? I'm not interested in implementing a third-party parallax plugin.
Also, I'm still waiting for response to the these 2 issues that I described in my last comment:
Thanks,
Hi,
Please provide wplogin again, I will check the background parallax with my developer.
For the text color, I will change it to white for you.
Best Regards,
Jelly Team
You have never requested a wplogin from me before. I can create a temporary user login for you if you can provide the appropriate email.
Thanks again for your help!
Hi,
You can use fake email, I just need username and password with admin permission. I will check it with our developer and to save your time, I will update your website immediately when I and our developer discussion about your case.
If you don't want provide it, you can create a package site from duplicator plugin and provide it for me. I will check it on my server with our developer.
I can make this ticket to private or you can create a reply private with private option.
Best Regards,
Jelly Team
Hi,
I had sent your ticket to our developer for parallax issue. The text in contact now change to white.
Best Regards,
Jelly Team
Hi,
I had updated the background image in mobile screen now. The result will like my screenshot, it's the only thing I can do for you. Maybe you can check it?
Best Regards,
Jelly Team
Hello,
Glad to see that those sections are now appearing on mobile, thank you!
However, it doesn't seem to have that parallax effect anymore. As I scroll down, the overlaid title doesn't move separate of the background image. Is this a result of fixing the background image for mobile screen sizes?
To be clear that only seems to be the case on those homepage parallax sections. It seems fine on the other pages of the site.
Hi,
I tried updating it again, but the custom style still not update. I think there is cache script in your website or your hosting provider, maybe you can check it?
@media screen and (max-width: 568px){#header .navbar-brand {width: 80%;}
.section.parallax {background-position: center !important; background-attachment: fixed !important;}
}
Best Regards,
Jelly Team
Hello,
I see those 3 lines of css code at the end of the style.css sheet currently. What does it need to be changed to?
Hi,
I think it's correct now, please check your website again. Please make sure you had clear caches and cookies before check it.
Best Regards,
Jelly Team
Hello,
I'm still seeing responsive issues. I'm including snapshots showing these problems.
On the tablet:
1. The parallax section with "Our Services" on the home page is still not centered.
2. The H4 titles in the services section are overlapping the section content that is supposed to be below it.
3. There's extra space between Training & Consulting and Supervision. I'm assuming this is because they are in different rows within Visual Composer, but is there a way to set it so that we don't have that space when viewing on a tablet or smartphone?
4. In the Contact section with the parallax background on the homepage, the "Contact Information" H2 is oddly close to the section content.
On the smartphone:
The parallax sections on the homepage are super zoomed in now. You can't really make anything out. What's odd is that if I open up the website in a browser on my laptop and adjust the size manually (i.e. clicking on the corner of the browser and dragging) to roughly the size of a smartphone screen, the parallax sections on the homepage look how I want them. Do you know why this is?
Thanks!
Hi,
To fixed for the 2&3, I had added this custom style:
@media screen and (max-width: 768px){ .section .text { margin-top: 0 !important; } .section .jt_row { padding-bottom: 0 !important; } }For the "Our Services" title, I see it's center in my side, maybe you can check it with other browsers, because I can't reproduce this problem and it not happen in my side so I don't know how to check it for you.
For the problem with the "Contact Information" H2, I had tried update custom style:
@media screen and (max-width: 768px){ .section .text { margin-top: 0 !important; } .section .jt_row { padding-bottom: 0 !important; } #contact .vc_empty_space {height: 25px !important;} }For the problem with the parallax, I will check it in my server and get back for you soon, your server have cache feature, so it take long time to impact your website then I can't check it immediately now.
Best Regards,
Jelly Team
Hi,
I had updated the new custom style for parallax, maybe it will need few hours to impact your website. Please clear caches and cookies then check it again.
Best Regards,
Jelly Team
Hey, I just wanted to say thank you again for all of your help. Your team has been really great!
I ran through the adjustments and the parallax sections look a lot better on tablet and mobile devices. However, I noticed a new issue (well actually it is something that happened before). The logo in the top menu overlay is low again and extending past the bottom of the menu. This is actually the first issue I had listed when I originally opened up the ticket. One of the recent changes must have nullified a correction we had made previously. I'll include a snapshot just in case.
Thanks!
Hi,
I tried check your website with my phone again and I'm sure it still work good, I don't do anything to impact this custom style.
I checked with iPhone 6s Plus, what are your device version?
Best Regards,
Jelly Team
I confirmed that the issue was only with my phone, which is old.
Thank you!
Hi,
So do you still need my help?
Best Regards,
Jelly Team
So we've found that the issue with the logo is occurring on older phones, like the iPhone 5. Do you know why this is happening? Is it something that we can fix or would it be difficult to do?
Other issue:
Noticing that the top nav disappears when viewed on mobile screen that is held horizontally. Do you know what causes that?
Thanks!
Hi,
I had updated the problem with old devices, but it will need few hours to effact the update in your website.
For the nav disappears when viewed on mobile screen because the wp admin nav bar, you can try check it when you logout, it will work well.
Best Regards,
Jelly Team
Thanks!
However, I don't think that the issue with the nav that I am talking about has anything to do wp admin bar. What I am talking about is the fact that the nav disappears when you hold the phone sideways instead of upright. This happens on when viewed on any phone, such as a friend of mine that does not have access to the backend of the site.
Honestly, this isn't a huge deal, I'm just curious why this occurs when you flip the phone on it's side.
Best,
Stephen
Hi,
I had updated it, please wait few hours to see if it's fixed the problem with navigation.
Best Regards,
Jelly Team
It's working!
I just have one last thing I wanted to ask you about. When holding the phone sideways, the social links in the footer don't stay on one line. As usual, I'm including a screenshot. I was wondering if there is a way to make it so they stay together like they do when holding the phone upright?
Thanks a million!
Hi,
I tried check your website in my phone and in my wife phone (iphone 5) and I don't see this problem.
Maybe you can check it again?
Best Regards,
Jelly Team
This issue seems to be happening on the iPhone 7 and iPhone 6. I'm including a screenshot I took today off my phone.
Hi,
I will check with my colleague in today and get back for you soon.
Best Regards,
Jelly Team
Hello,
I wanted to re-open this ticket so you could check something out for me. My business partner has informed me that she encountered an issue with the mobile version of the site.
Here's the situation:
She shared a link to the new website on her FB page. When she clicked on the link on her phone, she noticed two problems:
1. Black space appearing at the top of the homepage. This obscured the top nav but then it disappeared after she started scrolling.
2. She couldn't click on the phone number that's listed on the homepage and contact page.
What's odd is that I haven't experienced any of these issues. I've tried it on an iPhone 7 and iPhone 4. On both, I didn't see the black space and phone numbers were clickable. My business partner is using an iPhone 6. Could this simply be an issue with her phone specifically?
I'm including a snapshot she sent me showing the black space on the home page.
Thanks!
Forgot to add the screenshot.
Hi,
Really, I've tested a lot of time before I'm answered for you. I can't reproduce this problem in my phone (6s PLUS and 5).
Maybe you can tell your business partner check it with other phone if she can?
Best Regards,
Jelly Team
Thanks for checking this! I've also gone and tested this with a Samsung as well and haven't been able to reproduce the issues that she described to me. I was wondering if you have any theories that would explain why my business partner experienced this issue when it seems it's not occurring for anyone else?
Hi,
With my knowledge, I think the problem with the caches - cookies or the problem come from this device. I'm not sure, it just my imagine about it. But I'm sure I can't reproduce this problem too.
Best Regards,
Jelly Team
Hey,
I think I may know what is causing the issue and was wondering if you might know more. So it looks like this issue that my business partner reported (I'll include the screenshot) only happens when you are using the Facebook app on the phone. I had been using my phone's Safari browser to access FB and I never saw the issue. However, I was testing it on my friend's and they already had the FB app open. When I clicked on the link to our website, I was seeing the distortion that my business partner had described.
Would you know why/how the app may be causing this problem?
Thanks!
Hi,
Maybe you can try this css to see any difference:
.layout-switch .ip-header { background: transparent; }Best Regards,
Jelly Team
Hey guys,
I'm just curious, does this class selector directly refer to how the website is displayed on different apps or browsers?
Thanks!
Hi,
On the apps or browsers, when each device and each browser will have each section incorrect. The css and html always render correct, but to make it apply correct styles will need some knowledge and many test process.
I'm not understand your question clearly, I hope it's answer for your question.
Best Regards,
Jelly Team
Hey,
Essentially, you did answer my question and I appreciate it.
Should I add this snippet of CSS code at the bottom of the style sheet?
Thanks!!
Hi,
If you or your partner still see this problem, please try add it in your style file, we don't know it work or not when we not try it.
Best Regards,
Jelly Team
Hey!
Alright so that last bit of code that I added to the stylesheet did address the black bar issue, which is awesome! However, the phone number is still not clickable like it's supposed to be when navigating to the site from the FB app.
Any suggestions?
Thanks!!
Hi,
I see the number not include with right format, you phone number:
But the right format should:
You can check more detail in here: http://stackoverflow.com/questions/4572297/is-there-a-way-to-make-a-phone-number-clickable-on-an-iphone-or-android-phone-to.
Best Regards,
Jelly Team
Wow seems like a pretty simple oversight on my part, but that is the power of having another pair of eyes reviewing your work. I've correctly added the links to the phone numbers listed on the site. Thank you for all of the help!
I believe that we can finally close this ticket.
Hi,
I am currently closing the ticket. Please don’t hesitate to submit a ticket whenever you need help. I will be happy to assist you.
P.S. I would appreciate if you could please rate the Theme and like the assistance under my support, means a lot to me. Thank you.
You can rate it with your themeforest account at your downloads page, precisely at this link: http://themeforest.net/downloads and hover over the 5 stars for our theme.
Also, if you have linkedin account, please endorsements for me at this link: https://www.linkedin.com/in/locrabbirt/.
Thank you so much for all your help!!!
Best Regards,
Jelly Team