CODEWITHSUNDEEP
htmlcssresponsive-design
Derek
Derek

Reputation: 69

Extra width on Mobile views - Can't figure out what's causing the extra space

I'm working on making my site responsive. Here's a link: http://www.iPwn.com.

I'm using Google Chromes device mode, and using smaller views (like the iPhone 4, or 320px width) I keep getting extra width and a horizontal scroll bar.

Note: This is strictly for widths around 320px.. anything bigger I haven't fixed up (yet because I've been stuck on this)

I've went through one by one and removed every element, looked at the code piece by piece to try and figure out what's extending the layout horizontally. I can't find it anywhere.

At first I thought it was the navigation at the top, however I removed that completely and it was still there.

Any ideas on why it's doing this?

-edit- I just tested it again because of comments, and it works in Firefox, and for some reason it suddenly works in Chrome when you resize the browser window. However it's still not working in the "Device Mode", and also not on my iPhone itself.

Here's a screen shot: https://i.sstatic.net/oUfAK.jpg

Upvotes: 1

Views: 2119

Answers (2)

Neel Shah
Neel Shah

Reputation: 791

i think you have problem with your header section. it taking 336px instead of 320px.

#page{
    overflow:hidden;
}

hope this may fix your problem

above solution was quick fix for a time. it was not perfect solution; technically speaking.

The real problem is with your #blogFeed section.

Your Style

#blogFeed ul.postList {
  margin-left: 5%!important;
}

#blogFeed ul.postList {
  list-style-type: none;
  color: #fff;
  display: block;
  width: 95%;
  margin-left: 0px!important;
  padding-left: 0px!important;
}

Its making your container of 105%(320 + 16) i.e 336px in width so original size of container is now 336px instead of 320px;

problem with header : The problem with using "fixed" positioning is that it takes the element out of flow. thus it can't be re-positioned relative to its parent. so now with width : 100% to FIXED header its taking 336px and goes out of viewport(of 320px).

I hope you may understand this.

Upvotes: 4

Vinc199789
Vinc199789

Reputation: 1046

Found it. The cards have a width of 50%, BUT remember that the <ul> has a padding-left.

2 solutions

1) ul{ padding:0px; }
2) cards{width:calc(50% - (ulpadding-left/2) )}

Upvotes: 0

Related Questions