Hey guys, I am racking my brain trying to fix this issue (I’m sure it is a simple solution I forgot in width or something) But I was hoping if anyone has the time to be able to look at my public design as well as on the live website and see if they can figure out the issue?
When you view the site on a mobile phone (oh shrink the browser) there is a huge gap of white space going all the way down the page at the right causing the elements not to display properly and etc. Can anyone figure out what is causing this?
I think it’s the map you have at the bottom of the page creating a chunk of whitespace out to the right. Delete or reposition it in some way and that should solve the problem.
Hmmm I thought that could be the problem too but even without the map there’s a big space to the right when viewing it on smaller devices…
On a separate note, any way to get that map to change sizes based on the screen you’re in? Or should I just re-embed it with different sections/divs per screen size?
I’m looking at it now. Maybe save a backup and then republish. Something is overflowing. You haven’t added any custom code to change the site width have you? Looks like you have some widths set for columns on smaller devices that might be pushing the site wider?
I deleted the footer and that resolved so check there.
I deleted the footer and published. Still when you shrink the browser size it still has that gap to the right. And it doesn’t allow me to change the widths of the columns to prevent this from happening but I’m not sure what is causing it either.
I appreciate you trying to figure this out with me!
Ok I’ll fix that. I figured out the problem. It was that my hero image section had a width of 350px and i set it to auto and that fixed some of it. Then I delete footer and it fixes all of it. So I’m figuring out what in the footer is a width mark. Thanks again sir!
No problem. I noticed you had your footer in the map container so you might want to shift that out of there unless it was there for some reason. Good luck.