Docs

[jmartinos]

Hello,

1. I have created a website using X theme with the Integrity stack. I have mobile optimized my pages and all of the sizing and formatting is exactly how I want it, but I am having a problem with the alignment. I have aligned everything in my pages to be centered and it all looks good in extra large to medium screen views but when the screen is small (like small tablets or mobile phones) everything seems to align to the left. Even the top menu and footer move over to the left and you have to barely zoom out the screen to see everything, at that point, it is very clear to see that everything is weighted on the left side of the pages. What can I do to fix this problem

2. Also, my home page will not not show up on a iPad, I keep receiving “an error occurred” message but all other pages can be loaded just fine. And the home page works on all other devices just fine. Any ideas why this would be happening?

3. Lastly, When the screen gets smaller, my menu drops down and overlaps over some of my text at the very top of the pages. It usually happens on iPads or smaller laptop screens. Is there something I can do to make my menu turn into the navbar button at a larger screen size than it is set to?

The website is: http://www.eliteithome.com/lp

Thank you in advance.

[Rue Nel]

Hello There,

Thanks for writing in!

1] This issue was caused by your custom css code. You have added this:

.x-container { margin: 0 0 0 2% !important; width: 290px !important;}

You should be using this instead:

.x-container { margin: 0 auto !important; width: 290px !important;}

margin: 0 auto; will make sure that the container with always be at the center of the page.

3] This is because the width of the navbar is more than the combined width of the logo and the menu. I would recommend that you display the mobile menu as soon as the width is narrower which could no longer accommodate the inline alignment of the logo and menu. Please give us your thoughts.

Hope this helps.

[jmartinos]

Thank you for your response. I replaced the CSS you identified with the CSS you listed above. Unfortunately, it doesn’t look like it worked. My site is still weighted to the left on mobile devices. Is there an alternative method to fixing this?

“3] This is because the width of the navbar is more than the combined width of the logo and the menu. I would recommend that you display the mobile menu as soon as the width is narrower which could no longer accommodate the inline alignment of the logo and menu. Please give us your thoughts.”
-I am confused by this statement. When you say this, do you mean I wouldn’t be able to use the inline setting in the customizer but I would need to set it to “stacked” so it would stop dropping down and overlapping my pages on smaller screens?

Thank you for your help.

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

[jmartinos]

Unfortunately due to the security of the site I cannot provide the credentials. Is there another way to solve the problems?

Thank you

[Friech]

Hi There,

#1 That is because you defined a min-width on your page body, so even if the screen is 380px (mobile) the body is still in 600px, I can say that because I can scroll/drag the page horizontally on mobile.

Add this on your custom CSS to reset the min-width on screen 767px and below (tablet/mobile)

@media (max-width:  767px) {
	body {
		min-width: 0;
	}
}

#3 Show the mobile menu sooner before the inline menu drops.

@media (min-width:  980px) and (max-width: 1402px) { 
	.masthead-inline .x-btn-navbar {
	display: block;
    	float: right;
	}
	.x-nav-wrap.mobile.collapse.in {display: block;}
	.x-nav-wrap.desktop {display: none;}
}

Keep in mind that there are laptops/desktop with screen resolution below 1402px, so this means those viewer will get the mobile menu even if they are using a laptop or desktop.

#2 Would you mind providing an screenshot of that error (“an error occurred”)? I cant see it on my end, please try to clear your phone’s browser cache.

Thanks.

[jmartinos]

Hello,

1. I added the CSS you recommended to reset the min-width on screen 767px and below (tablet/mobile). Unfortunately it didn’t work. It’s doing the same thing it did before by appearing to be weighted to the left. Is there another solution?

2. I have attached a screen shot of my iPad when I tried to load the page. It’s only my homepage that has this issue. The others seem to load just fine, but I always get this notification when I try to get to the home page, weather its directly or through a link deeper in the website.

3. The solution for number 3 worked great. Thank you.

Thank you for your help

[Nabeel A]

Hi again,

1. Please replace the previous code with this:

@media (max-width:  767px) {
	body {
		min-width: 0 !important;
	}
}

2. Thank you for the screenshot, it looks like a browser issue, please follow this link to fix the issue http://errorfixer.co/a-problem-occurred-with-this-webpage-so-it-was-reloaded-fix/

3. Glad it worked for you 🙂

Cheers!

[jmartinos]

Thank you.

1. That solution worked! Thank you

2. The solutions listed in this site are for ipad/iphone users and what they can do to view the site. Do you have a link or anything I can do on my end to make it so my webpage doesn’t even have that conflict with Apple products?

Thank you again for your help.

[Paul R]

Hi,

For #2

Please update theme and plugins to latest version and see if that fixes the issue.

These are the latest version numbers – https://community.theme.co/kb/version-compatibility/

You could also try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Thanks

[Author]

Posts