Make Website Adaptive to Diifferent Screen Types/Sizes

Support
#1

Good Afternoon,

I am working on getting my site to look good on all devices. But I am have a lot of trouble.

  1. The top menu is not unfolding down once you reach small and extra small screens.
  2. The side bar menu extends the entire width of the screen.
  3. Content should be displaying properly, I am ok with having the user have to zoom in on the page if necessary to read the font, but I cannot even see the content to judge if it is displaying properly.

jamesonschultzphotography.com

Can you please help me make this site look beuatiful on all devices!? No idea even where to start with the adaptivity.

Thanks in advance,
J

#2

Hi There,

Thank you for writing in! 1) that is strange, would you mind doing a testing for a plugin conflict to see if a plugin is preventing your mobile menu to work. 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.

  1. Lets reduce the width of the 1/5 column where you placed the menu, but only on mobile-screen when columns start stacking on top of each other. To do this, please add a class sidebar-menu to the said 1/5 column.

And then add this on the page CSS or Theme Options > CSS

/*mobile sidebar-menu styling*/
@media (max-width: 767px) {
	.x-column.x-1-5.sidebar-menu {
		max-width: 50%;
		margin: 0 auto 50px;
	}
}

Feel free to adjust the values where you see it fits.

  1. What content is not displaying? Please clarify. If you’re having issue with headline getting cutoff or text too big/small for mobile. You can utilize the Responsive Text Settings

Cheers!