Issues with website appearance on mobile

Hello,
I tried using the “search” box to find the answer in forums…but it searches ALL the forums, not just Travelify forum. I’m pretty new to Wordpress etc. and am totally intimidated by the notion of doing custom CSS code…but I’m willing to copy/paste suggestions if it doesn’t burn down my site. Otherwise, I’d rather install a plugin.

My site is www.drnicoleredmond.com and it lives on Bluehost.

  1. On my iPhone 6 (iOS 9.2), the nav menu is appearing in blue, but I updated the options via Travelify Main options–>Header Area Color–>menu bar color to red. It looks fine on my laptop, but on mobile the nav menu is still blue.

  2. I also have a header image that is not visible on my phone. How to fix? On my laptop, there seems to be a lot of extra white space around my header image…I made the image the recommended size (I think). How can I figure out how to shrink the header area so there is more room for my content, and is this issue possibly why the header image is not visible on the phone?

  3. Some of my pages (Teaching, Mentoring and Advising Teaching, Mentoring, and Advising – Dr. Nicole Redmond and Bookshelf and Store http://www.drnicoleredmond.com/bookshelfandstore/) don’t seem to load properly…they are only filling half the screen or the page looks cut off. (see pics attached)

RANDOM Added question:Is there a list of “preferred plugins” that work particularly well with this theme?

Hi @nredmond,

I hope you are well today and thank you for your questions.

I tried using the “search” box to find the answer in forums…but it searches ALL the forums, not just Travelify forum

You should prefix your search keywords with theme name like “Travelify custom CSS”

1. On my iPhone 6 (iOS 9.2), the nav menu is appearing in blue, but I updated the options via Travelify Main options–>Header Area Color–>menu bar color to red. It looks fine on my laptop, but on mobile the nav menu is still blue.

Could you please try clearing your mobile browser cache or using different browser?

It’s displaying red on my mobile.

2. I also have a header image that is not visible on my phone. How to fix? On my laptop, there seems to be a lot of extra white space around my header image…I made the image the recommended size (I think). How can I figure out how to shrink the header area so there is more room for my content, and is this issue possibly why the header image is not visible on the phone?

I tested it and found your header image file http://www.drnicoleredmond.net/wp-content/uploads/2015/12/cropped-Dr.-Nicole-Redmond-Header2.png contains lot of extra space around the image as shown in the attached screenshot which may be causing this issue so please try removing this extra unwanted space.

3. Some of my pages (Teaching, Mentoring and Advising http://www.drnicoleredmond.com/teaching/teaching-mentoring-and-advising/ and Bookshelf and Store http://www.drnicoleredmond.com/bookshelfandstore/) don’t seem to load properly…they are only filling half the screen or the page looks cut off. (see pics attached)

I visited your shared pages and it seems the issue is causing by the Jetpack Mobile Theme and the iframe added in the page as shown in the attached screenshot so please try changing or disabling them.

RANDOM Added question:Is there a list of “preferred plugins” that work particularly well with this theme?

All WordPress plugins which are developed following WordPress development standards work well with this theme. You can find the WordPress plugins to use with this theme here WordPress Plugins | WordPress.org

Best Regards,
Movin

Disabling the Jetpack mobile theme helped with issue # 1 and 3, so thanks for that.

Regarding issue #2 re: Header. I realized that I sized my logo for the “header image” (1018x250px) (Travelify–>Header Image) but was uploading it via Travelify Main Options–>Header Options–>Header Logo where there is no optimal size given. However, When I disable Header logo and upload the image in the header image area, I still get a lot of white space up top although the original image file doesn’t appear to have the space in the top on preview (there is actually more white space on the sides, but when I crop that then the uploaded image ends up left justified instead of centered). Any thoughts on how to fix?

I think I could use some clarification on how the two areas for images at the top of the page work (header logo vs. header image), as per my prior reply.

I found this topic in the forum: https://colorlibsupport.com/t/how-to-remove-white-space-around-header-images-and-or-logo-in-travelify/

I got bold and played around a little with the margins/padding in the stylesheet (having zero knowledge of CSS), using a Header IMAGE, with no/disabled header LOGO. It still looks like there is a bit of space up top. I tried having on header IMAGE and uploading it as the header logo but the image wasn’t as sharp and I still had an issue with the excess space, especially when viewing it on mobile phone.

Thanks!

Hi @nredmond,

However, When I disable Header logo and upload the image in the header image area, I still get a lot of white space up top although the original image file doesn’t appear to have the space in the top on preview (there is actually more white space on the sides,

I can see there is still extra space around the image logo file that you have uploaded on your site.

Could you please share me the original image file that doesn’t appear to have the space?

but when I crop that then the uploaded image ends up left justified instead of centered). Any thoughts on how to fix?

Just let it be the left justified. We will make it center aligned by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Travelify Other Options

img.header-image {
    margin: 0 auto;
    float: none;
    width: auto;
}

Best Regards,
Movin