Streaming live at 10am (PST)

The width of design is off in phone portrait mode


#1

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?

Public Design Link: https://webflow.com/design/inep?preview=283d7f3acf6af31a1b99b3c6a1c87b9e

Live project link: http://inep.webflow.com

Thanks for all your help!

  • Chance

#2

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.


#3

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?

Also, this width problem is driving me nuts! frowning


#4

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.


#5

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!


#6

Ok I saved the backup and I'm going to keep deleting things and republishing see if I can figure out where the problem lies.


#7

Okay. Revert to the version with the footer. Delete your map and delete the copyright (I think this is where the problem is/was).


#8

Deleted footer section and map section and map heading section and published and I still get that gap. Argh


#9

On the tablet mode you have the inep-benefits-div (pan on stove) width set to 350 and it's pushing everything over the edge.


#10

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!


#11

The fricking copyright haha. Thanks man, you really helped me out smile


#12

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.


#13