Page widths on mobile displays

[neural-loop]

I might have an older version of the template still, but something I've noticed is that in the mobile displays, the use of % for the page width can make some very narrow displays. I found using

@media (min-width: 240px) {
    .container {
        max-width: 100%;
    }
}
@media (min-width: 540px) {
  .container {
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 100%;
  }
}

Worked to fix many issues, I think it is more usable.

Also a nice to have could be (at least for mobile) body a { word-break: break-all; }

[tfsomrat]

Hey @neural-loop, can you attach a screenshot? where is actually breaking the template?

[neural-loop]

I can explain my thinking better.

So on tablet, and mobile, there is limited screen space to be used. The template should not put any % or size based padding here.

It can create situations like this (it's not a pure hugoplate, I've changed things)

The code changes I provide present this:

[neural-loop]

My example is exaggerated, probably from some other changes I made in the template - but here is an example in the pure hugoplate

At least in this situation I think the right move is to go full width (95% works too) rather than a large % on the container. because it is for mobile and tablet displays.

[tfsomrat]

As you know, this is a boilerplate / starter template, so user will modify it as their needs. we can't define what user wants from it. so we pick the industry leading solution which is container based.

In your case, you should go full width, but we can't change the container system. hope you understand. thanks for using Hugoplate. have a good day.

[neural-loop]

And for this

body a { word-break: break-all; }

Just put a long link in a content area on a mobile display and it breaks the responsive page width.

[neural-loop]

As you know, this is a boilerplate / starter template, so user will modify it as their needs. we can't define what user wants from it. so we pick the industry leading solution which is container based.

In your case, you should go full width, but we can't change the container system. hope you understand. thanks for using Hugoplate. have a good day.

this is not recommending to change the container system at all. this is saying that the way the css could be changed with a minimal effort to add more usability