CODEWITHSUNDEEP
jquerycssresponsive-designresponsiveness
kevosoup
kevosoup

Reputation: 47

Mobile Responsive Page Not Taking Full Width

I'm designing a responsive design for a client and I'm running into the issue that there is a space of unnecessary padding/margin on the right side of the page that I can't seem to get rid of.

I've checked all of my elements and styles and it doesn't appear that there is anything that could be causing this issue. I've got the meta tag header.

<meta name="viewport" content="width=device-width, initial-scale=1">

I'm using jQuery and @media for the responsiveness.

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 1)
and (orientation: portrait) 
{

Here is the URL http://www.smcelectric.com/smc/

I'm using Chrome's "device mode" view to check it, as well as using it on my phone.

Any suggestions or requests for extra content welcome. Thank you!

You will notice on the right side there is some random space.

Here's a shot in the Chrome development tool where I have highlighted the html tag.. Highlighted HTML Tag Screen Capture If you see there are no extruding elements from the code. I've checked the .wrapper, among many other elements to ensure there is nothing going outside from the view port. Perhaps I am missing an element that's expanding past the viewport? I am not working on a tablet display, simply the mobile display as of right now.

Upvotes: 1

Views: 1370

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

If you are telling about this issue:

The reason is that, your content is overflowing the view-port. Just wanted to know if that's the case, then you may need to handle it differently because, your children:

.wrapper {
    margin: 0 auto;
    width: 1000px;
}

Has a fixed width of greater than the viewport. This should be made 100%. Also, it is better to give all the images, a maximum width of 100%:

img {max-width: 100%;}

Upvotes: 1

Related Questions