Menu icon Foundation
foundation 5 on mobile phone

Hello, this is the first time i'm using Foundation 5. When on pc or laptop my website looks fine and responsive but when i see it on phone, i can swipe it to the side to white space. My website www.dirtyartsyk.com. could you guys help me to fix it? I dont know what to do. Thank you.

Foundation 5Responsive

Hello, this is the first time i'm using Foundation 5. When on pc or laptop my website looks fine and responsive but when i see it on phone, i can swipe it to the side to white space. My website www.dirtyartsyk.com. could you guys help me to fix it? I dont know what to do. Thank you.

Rafi Benkual about 3 years ago

Looks like directly inside your header, you have columns not wrapped in a row. Doing this fixes it:

<div class="content">
  <header class="row">
    <div class="small-8 medium-8 large-8 columns large-offset-1 medium-offset-1 small-offset-1 end" id="header-tagline">

Note: Just to simplify your markup, Foundation is built mobile first. This means this:

<div class="small-8 medium-8 large-8 columns large-offset-1 medium-offset-1 small-offset-1 end" id="header-tagline">

becomes

<div class="small-8 columns small-offset-1 end" id="header-tagline">

harnindyo inubhimantoro about 3 years ago

it's still the same, i'm using not using off canvas menu from foundation, does this affect it?

Rafi Benkual about 3 years ago

Really? I'm not seeing the side scrolling behavior on mobile anymore. If it's not fixed, can you explain what's happening in more detail?

Rafi Benkual about 3 years ago

And no, has nothing to do with another off-canvas.

harnindyo inubhimantoro about 3 years ago

really? on your phone its not side scrolling anymore? because on mine it's still the same in every pages of the web?

Rafi Benkual about 3 years ago

That's right, just checked again n Iphone 6 and Chrome using emulator. It is not overflowing the viewport any longer.

Vijay Mishra 14 days ago

As I read above, a very good answer has been given.