I would like to optimize my website for mobile devices, but am having trouble figuring out how to adjust the mobile settings to make it look like the layout of the website. I tested it on my phone and other devices and it did not work or fit to their screen. Do you have any advice on how to do this?
When viewing the site on mobile devices, items from the webpage are not resizing to fit the mobile screen. For example in the screenshot attached: the logo is covering the dropdown menu and the header image is being cropped. Random cropping is happening on several of the pages and is a recurring issue throughout the mobile site. I am looking to adjust the mobile settings so that the website can have a similar look to how it appears on the computer screen. How do I go about doing that?
As i suggested in your other ticket these issues are due to you running Theme Version 4.1. Please update to Theme Version 4.1.1. Which has fixes for these minor bugs.
I tried adding in the custom css as you suggested and it did not fix the issue. No matter what values I set in the css, the logo still covers the dropdown menu. It looks like it needs to be able to be adjusted on the horizontal axis and not the vertical as this code does. How do I fix the other issues on the mobile display? I do not want all of the images to be cropping in weird places.
Okay, this has fixed the logo issue when viewing on mobile devices. You still have not addressed any of the cropping or layout issues I discussed however. Please give me instructions on how to fix the rest of the mobile site.
There isnt much we can do about the cropping as it is done automatically by the browser . If you are using the nectar slider. Try turning on the Flexible Slider Height option in there.
I already have the flexible slider height option turned on. Did you not test out the features of your theme on mobile devices when building it? It seems pretty ludicrous that your theme would not be optimized for mobile devices or at least have adjustment settings for a mobile version.
It appears that you did not have the flexible slider height option activated - I've logged in and turned that on for you and now you should see your slider resizing accurately for all screen sizes (drag and resize your window around) just the same as the live demo shows themenectar.com/demo/salient-frostwave/
Do you have any solutions to the cropping issue that is happening on the other pages, particularly on the portfolio pages? The "Click Image to See Photo Gallery" text that I have put in really looks awful on the mobile version.
Add this into the Custom CSS box located in your Salient Options panel :
@media only screen and (max-width: 1000px) {
body .vc_text_separator.wpb_content_element {
top: 20px;
position: relative;
}
}
@media only screen and (max-width: 480px) {
body .vc_text_separator div {
font-size: 15px;
}
}
Good morning!
I would like to optimize my website for mobile devices, but am having trouble figuring out how to adjust the mobile settings to make it look like the layout of the website. I tested it on my phone and other devices and it did not work or fit to their screen. Do you have any advice on how to do this?
Thanks!
Hey Christine!
Can you please elaborate what you exactly mean by optimize. I just visited your url and it seems to be resizing correctly ?.
Thanks
ThemeNectar Support Team
When viewing the site on mobile devices, items from the webpage are not resizing to fit the mobile screen. For example in the screenshot attached: the logo is covering the dropdown menu and the header image is being cropped. Random cropping is happening on several of the pages and is a recurring issue throughout the mobile site. I am looking to adjust the mobile settings so that the website can have a similar look to how it appears on the computer screen. How do I go about doing that?
Hey Christine!
As i suggested in your other ticket these issues are due to you running Theme Version 4.1. Please update to Theme Version 4.1.1. Which has fixes for these minor bugs.
Cheers
ThemeNectar Support Team
Hey Tahir,
I just downloaded the Salient Theme from Themeforest again, uploaded it via FTP, and none of the issues are being resolved.
Hey Christine!
For the logo issue you will have to add in some css to readjust its size. Please see FAQ: http://themenectar.ticksy.com/faq/2020 .
Thanks
ThemeNectar Support Team
Hey Tahir,
I tried adding in the custom css as you suggested and it did not fix the issue. No matter what values I set in the css, the logo still covers the dropdown menu. It looks like it needs to be able to be adjusted on the horizontal axis and not the vertical as this code does. How do I fix the other issues on the mobile display? I do not want all of the images to be cropping in weird places.
Hey!
Add this into the Custom CSS box located in your Salient Options panel :
/* Mobile */ @media only screen and (max-width: 470px) { body header#top #logo img{ height: 22px!important; top: 4px; } }
Cheers
ThemeNectar Support Team
Okay, this has fixed the logo issue when viewing on mobile devices. You still have not addressed any of the cropping or layout issues I discussed however. Please give me instructions on how to fix the rest of the mobile site.
Hey Again!
There isnt much we can do about the cropping as it is done automatically by the browser . If you are using the nectar slider. Try turning on the Flexible Slider Height option in there.
Thanks
ThemeNectar Support Team
I already have the flexible slider height option turned on. Did you not test out the features of your theme on mobile devices when building it? It seems pretty ludicrous that your theme would not be optimized for mobile devices or at least have adjustment settings for a mobile version.
Hello Christine!
It appears that you did not have the flexible slider height option activated - I've logged in and turned that on for you and now you should see your slider resizing accurately for all screen sizes (drag and resize your window around) just the same as the live demo shows themenectar.com/demo/salient-frostwave/
Cheers
Hey I Am Nectar,
Do you have any solutions to the cropping issue that is happening on the other pages, particularly on the portfolio pages? The "Click Image to See Photo Gallery" text that I have put in really looks awful on the mobile version.
Hey Again!
Add this into the Custom CSS box located in your Salient Options panel :
@media only screen and (max-width: 1000px) { body .vc_text_separator.wpb_content_element { top: 20px; position: relative; } } @media only screen and (max-width: 480px) { body .vc_text_separator div { font-size: 15px; } }
Cheers
ThemeNectar Support Team
Hey again - you could add this into the Custom CSS box located in your Salient Options panel to sort that:
@media only screen and (max-width: 1000px) { html body.single-portfolio .container-wrap { padding-top: 31px !important; } }Hi ThemeNectar,
I also have the same issue with our site. The header is not mobile responsive. Can you help me with the right CSS codes as well?
Thanks!!
@Jam,
Could you provide your page url so we can see the issue ?.
Thanks
ThemeNectar Support Team
Hi Tahir,
Thanks for your reply.
Here's our page: https://simployeehr.com/
Actually all our site's page headers are not mobile friendly
Hey Again,
You need to reduce the number of Menu Items or adjust the Header Options so that many menus can fit in the Ipad screen size.
Thanks
ThemeNectar Support Team
Hi,
on a similar note, my page header image is getting cut off on mobile devices. how can the size be adjusted so it keeps the full image?
Hi Rian,
Please open a new ticket and also send in a url that is working as the one you have is no longer working.
Thanks.