0

I have a webpage that displays a bracket that was created using css. The page needs to be mobile friendly, so I have set the viewport tag <meta name="viewport" content="width=device-width, initial-scale=1">. However, this forces the user to only see a small portion, I would like to allow them to see the whole bracket like they would on a larger screen. So I need to specify that the div that contains the bracket does not get set with the viewport, it appears as though there was no viewport set on the page.

How can I achieve this effect? Here are some screen shots of my page to show visually what I would like to accomplish. Desired effect The first screenshot is with no meta viewport tag, the second is with the meta viewport tag, and the third is what I'd like to accomplish. The header and title is set with the viewport, but the bracket is shown as if there is no viewport.

I am looking for a css/html solution but am willing to try JS or JQuery. I have tried setting width and height properties on the container among other things, and nothing worked. Also to note, the css to style the bracket is fairly delicate, so I'd prefer a solution that works on the outer container, and doesn't effect the inner styles of the bracket.

larjae
  • 302
  • 3
  • 13

1 Answers1

0

The viewport setting applies to the window, not the elements on the page, so it is impossible to exclude an element form the viewport.

If it were an image it would be extremely easy, but if you're applying a lot of fiddly (probably absolutely positioned) css to accomplish your bracket, it limits your options quite a bit.

You'll also run into readability issues if you start scaling the text down too much. So I think your best bet among options that don't require you to change the bracket itself is to set overflow-x: auto; on the parent div, this will give you a scrollbar and give your users access to scroll to the rest of the bracket.

If you need to scale the whole bracket at once, you're probably going to have to slip over into using some JavaScirpt, this post looks like a great place to start to handle scaling.

If you're feeling more adventurous, the best solution overall is to make the bracket itself responsive. Here is an example you can use for reference.

LightBender
  • 4,046
  • 1
  • 15
  • 31
  • Thanks for your thoughts, its helpful as I try to work through this problem. I'm not too concerned about readability in scaling down the text, because the user should be able to zoom in. I just want to give the user an overall picture of the bracket, instead of limiting them to just a few rounds. I like the responsive bracket example you gave, would there be any way to scale down the height of the bracket along with this? So that the entire bracket condenses into the height of the screen? – larjae Sep 02 '17 at 19:30
  • @Larisa You could use [media queries](https://www.w3schools.com/css/css_rwd_mediaqueries.asp) to reduce the heights, vertical spacing and font size as your narrow the screen – LightBender Sep 02 '17 at 19:35
  • Okay, that could work. For now I think the quick fix will be just to provide a link to the full screen version (the same page, without the viewport tag). – larjae Sep 02 '17 at 20:00