WordPress update 3.7 causing layout issues in Googls Chrome

First, thanks for the great comment…you should do that in a theme review and a million star rating ??

As for your issues at hand, all I can say is WOW, that is a lot of menu links! lol…but what is happening is that the nav container has a fixed height to it. You can change that by removing the height. Styling for this is found in the theme’s style.css around line 149 and looks like this:

#nav-wrapper {
	background-color:#78a5b6;
	border-radius:60px 60px 0 0;
	-webkit-border-radius: 60px 60px 0px 0px;
	height:37px;
	text-align:center;
	font:normal 14px open_sans, Arial, sans-serif;
		font-size: 0.875rem;
	color:#fff;
}

I viewed your site in Chrome (which is my primary browser), but I do not see what you are seeing about images being cut off the edges.

For your mobile menu not being recognized in your Galaxy, this one is very difficult for me to troubleshoot because I don’t have one. Also, when you say not recognized, do you mean it’s totally gone, error, or other?

Recently with Celestial, I did a fix because the menu was there, it’s just that on the mobile view, the menu links were white which the background of the mobile menu dropdown was white (odd). I found out it was something to do with the new ios7 on the new iphone that was making the links white and not seen. I’m wondering if this is happening for you…

quick follow up… about the squishing of your images, ie the front page, are you referring to when you shrink the browser down they close into each other?

That is because the custom bordering you did for the images which takes up pixel space on the sides of each image. The responsive theme will resize (downsize) the image to fit as you reduce the browser viewing area, but the bordering takes up space. It’s a techy thing but when styling the outside of an image, you have to account for the space that styling needs per image. The responsive sizing of images is set to width: 100%

The best way to describe this is:

If you have 4 columns, each is 100px wide and you put an image in each one (without bordering or styling), the responsive coding will make each image 100px as well so it fits in each one.

Now, if you add a border to the <img> tag as you did which is 10px thickness, this adds 20px per image for a total of 80px more width (space) is needed. The bordering is not a container, so then your images will maintain their 100% width to fill the actual container they are in. With the added size of bordering, your image will not adjust to fit in the bordering because the border styling is not a container, so the image does not resize to adjust to that.

lol, confusing I know. Not an easy solution to fix, other than changing the css for img width: 100% to be something like 99% or something like that. A quick look on Google brings up several related issues and each requires the user to do custom changes based on their needs:

Do a google search with: responsive images with borders

Then visit the various websites that show up in the results.

Thank you for the quick reply.
I gave you all a great review. ??

I changed the menu height to 100% and that worked. Thank you.

I will see what I can do about a different border for the Pictures on the homepage and then change the width %.
That made perfect sense to me. ??

As for the mobile, the mobile menu bar does not appear at all in landscape mode.
The Main menu appears instead.

Yes. There are a crazy amount of Menu items. My client wants to make sure all her stuff is visible. One of the reasons she picked your theme.

Thanks again.

Thanks ??

For the menu part…so the menu shows up, but it doesn’t change to the mobile button dropdown, it stays full?

My pleasure.

That is correct.
I think if the mobile recognition size is changed it should resolve it.
I’m not sure where that code is at.

It would be hard for me to test this out because again, I don’t have a samsung, but the styling for the menu media queries is in the theme’s /css/menu.css location. The media queries start with a line like this:

@media …and will have a min or max widths which you can adjust them until you find the right combination that suits your site’s needs.