Site on mobile not shrinking

By jsimonis on 1 Feb 2017 at 02:56 UTC

I have a Drupal site where the site on mobile isn't shrinking. It was working fine a few days ago and when I logged in today to do more work, it isn't anymore. I can't seem to figure out why.

I've tried several options for the viewport and none have made a difference. It may be that I've just looked at this code for too long and I'm just missing something.

It's just the front page: http://inv3nt.tgci.com/home

The inner pages are still under construction as far as the theme and such goes, so they're all messed up right now.

Eventually the site will get its own mobile theme, but for now I need this one to scale appropriately on mobile devices. Wish I could figure out what changed in the last few days to make it not work when it was previously.

Thanks for any help you can give. :)

Comments

~

pixelsweatshop commented 1 February 2017 at 06:07

In your style.css (line:26) you have:

#wrapper {
    background: #ffffff url("images/header-bg/blue-masthead3.jpg") no-repeat scroll left top;
    margin: 0 auto;
    min-width: 1200px;
    padding: 0;
    width: 100%;
}

Get rid of the min-width: 1200px;

Without that, the wrapper no

jsimonis commented 1 February 2017 at 15:06

Without that, the wrapper no longer goes across the page on mobile - both the header area and the footer area end up cut off part-way across the screen. We had to add that to both the body and the wrapper to make those areas go the full width like they are supposed to. You can see it right now - the min width is not there for the wrapper anymore.

The main body area is 1200px wide (and the header is 1410px wide). When you remove the minimum width for the wrapper, the header and footer are now just the screen width, which means their content goes across multiple lines instead of it shrinking down to fill the space. The main area still scrolls across.

~

pixelsweatshop commented 1 February 2017 at 15:17

I am not sure what you are trying to do. Anywhere where you use a min-width, the page won't scale down. You need to use % main area width and then some media queries to fix blocks in the main content area. You need to stop using fixed width and tables whenever possible as well. For example your .common_table div div need to be a percentage width and not 297px. Otherwise it's not going to be responsive.

The thing is that last week

jsimonis commented 1 February 2017 at 15:20

The thing is that last week it was scaling fine and now it's not. The min-width property has been there for weeks. It forces the top and bottom to be the same width as the main content area. The live version of the site also has a set width, 950px, and scales fine. We just increased to 1200px so that we don't have so much whitespace.

The blocks inside the main content area are primarily all percentages now. Widths in pixels are primarily for headers. If I use a media query to not force the 1200px wide on the main content area, then the main area doesn't scale, it just makes everything all funky.

~

pixelsweatshop commented 1 February 2017 at 15:30

The thing is that last week it was scaling fine and now it's not

Whether it worked last week or not, I am telling you that is what is causing it now. Looking at your post history, it looks like you know what you are doing. However anywhere you have a min-width in your css, the page is not going to get smaller than that. Furthermore, anywhere you have set your width in px in %, it isnt going to be responsive. This is responsive design 101. I am not sure what more to tell you as there are so many factors in your page that are not responsive causing the layout to break in smaller devices.

Ok, so why does the current

jsimonis commented 1 February 2017 at 15:37

Ok, so why does the current live site scale even though it has its width in set pixels, not %? It's set to 950px wide, yet it scales down and fits on one screen.

~

pixelsweatshop commented 1 February 2017 at 15:39

Are you comparing a fixed width site to a responsive site? I have no idea what you mean by "scales down" and fits on your screen. You need to be more descriptive.

The current site is set to

jsimonis commented 1 February 2017 at 15:58

The current site is set to 950px in width. It has a lot of whitespace on it. So we went up to 1200px in width in the new version.

When you view the current site, it is shrunk so that the entire thing fits on the screen and looks the way it does on a desktop, just shrunk and without the whitespace.

The new site should do the same thing with a 1200px with, except that now the header and footer stretch the entire page instead of being 1200px like the main site.

Heck, at this point there is

jsimonis commented 1 February 2017 at 15:39

Heck, at this point there is almost nothing that has a pixel width and it still doesn't scale correctly. So obviously something else is messed up beyond having a pixel width.

~

pixelsweatshop commented 1 February 2017 at 15:42

There is a ton of stuff using px for it's width.

#main-content {
    line-height: 130%;
    margin: 0 auto;
    padding: 0 10px;
    width: 1200px;
}

#header-top-center {
    height: 160px;
    margin-left: 280px;
    margin-right: 260px;
}

#block-block-36 {
    float: right;
    position: relative;
    right: 0;
    text-align: center;
    top: -50px;
    width: 253px;
}

And that is just in 30 seconds if inspecting your css.

All of the areas that have a

jsimonis commented 1 February 2017 at 15:59

All of the areas that have a set pixel width also have a media query for them for mobile devices.

The only ones that still have a width are the top left and top right boxes.

The css actually looked like

jsimonis commented 1 February 2017 at 16:14

The css actually looked like this:

#main-content {
  width: 1200px;
  padding: 0 10px;
  margin: 0 auto 0 auto;
  line-height: 130%;
}
@media screen and (max-width: 500px) {
/* applies only if the screen is narrower than 500px */
  #main-content {
    width: 100%;
  }
}

With similar other ones for the other ones that are also fixed width. But all it's done is completely screw up the entire page even worse than it ever was and it still doesn't scale. So I'm clearing them back out.

I think maybe the confusion

jsimonis commented 1 February 2017 at 16:43

I think maybe the confusion here is that there is an assumption that this is a responsive layout - it's not. It is a fixed width layout. Their current site is fixed width and they want fixed width on the new version. Most of the site visitors are coming via desktop, so how it looks there is most important. However, some do come via mobile and the site needs to work on it as well.

The current site, which is fixed at 950px, looks like this on mobile. Note that it starts out zoomed out so that the full width of the page shows:

Live Site Screenshot

The dev site, which is fixed at 1200px for the main content but has a 100% width header and footer, looks like this on mobile. Note that it does not start zoomed out.

Dev Site Screenshot

I've tried the same viewport tag as well as several others, with no luck.

~

pixelsweatshop commented 1 February 2017 at 16:50

I think maybe the confusion here is that there is an assumption that this is a responsive layout - it's not. It is a fixed width layout.

I am not sure where I got that idea from considering the very first sentence in your opening post says:

I have a Drupal site where the site on mobile isn't shrinking.

If you just want a fixed width, then just put the min-width back. It was working just fine from my end.

When I said shrinking, I

jsimonis commented 1 February 2017 at 16:56

When I said shrinking, I meant that it doesn't show it as shrunk when you first view the site on mobile. As in it's like 10% of its normal size so that it fits on the screen.

When I view the site on my phone, it shows it still blown out to the full 1200px width instead of being 10% of whatever so that it would completely fit on the screen. Does yours? I've completely cleared all my caches and such on my phone and looked on my daughter's Android as well. Both show the screenshot that I posted as a link.

Well, shoot. I looked at it

jsimonis commented 1 February 2017 at 17:01

Well, shoot. I looked at it with the generic "Internet" browser that my phone has and it shows fine there. But Chrome is all messed up.

Second Dev Screenshot

Is maybe my browser just messing up and I've just spent days cursing at this thing for nothing?

~

pixelsweatshop commented 1 February 2017 at 17:05

You need to play with your meta viewport.

See https://developer.apple.com/library/content/documentation/AppleApplicati...
or

https://developer.android.com/guide/webapps/targeting.html

for e.g.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=yes" />

Thanks. I've got some folks

jsimonis commented 1 February 2017 at 17:11

Thanks. I've got some folks pulling screenshots of what they see on their own phones. I'm really going to kick myself if this is just a matter of my phone glitching in Chrome and not an actual problem with the code.

~

pixelsweatshop commented 1 February 2017 at 17:13

If this issue is not consistent across devices, then that is exactly your issue. Not all devices/ios versions support viewport the same way.

It could explain why until a

jsimonis commented 1 February 2017 at 17:17

It could explain why until a few days ago it was working fine, even though no code changes were made. And why the other site works fine. Thus far all the screenshots I'm getting are all fine. So I'm beginning to think this might be my device messing up, like some setting we did, rather than code based. But I will see if I can find anything that makes mine behave.

Indeed. Got screenshots from

jsimonis commented 1 February 2017 at 17:48

Indeed. Got screenshots from people with the same phone - it's fine. It's our phones that were the problem. Ugh! Hate it when that happens.