CODEWITHSUNDEEP
mobileresponsive-designzoomingscaleviewport
dsimms
dsimms

Reputation: 1

How can I make a specific, fixed-width DIV on my responsive website scale to fit smartphone screens?

I have a responsive website. I already have...

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

...in the header. The website doesn't just scale everything down automatically to fit on a smartphone screen. It maintains the proper size of my DIVs (whether they be fixed or percentages) and I design my elements to fit accordingly.

However, on one page, I have an interactive diagram with several elements. These are blocks (with text inside them), and they have to maintain fixed widths. The problem is, these fixed widths are much larger than smartphone screens. It's about 1000px wide.

I can't make this div percentage based. It has to be at least 1000px wide and maintain that size on every device. Obviously, this means that it will not fit on smartphone screens.

What I would like to do is continuing using...

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

...for every other element in my website, except this one DIV. I need to scale the entire parent DIV, its child DIVs and the text inside of the child DIVs.

I have tried the CSS "zoom" property. But, it doesn't scale the text properly, and the widths of the child DIVs don't seem to "zoom" equally. They get out of alignment.

How can I conditionally apply that meta viewport tag to everything except this specific, fixed width DIV?

Upvotes: 0

Views: 2583

Answers (2)

mikev2
mikev2

Reputation: 110

Disclaimer: I'm not exactly certain this is what you're looking for and I don't have enough rep to ask for clarification in a comment, so here's a possibility...

<meta name="viewport" content="width=1000" />

...where "1000"px is the fixed width of the div you're looking to contain. By omitting the "initial-scale" attribute, the device should figure out the scaling it needs to apply for itself.

Upvotes: 0

Amr Morsy
Amr Morsy

Reputation: 186

you need to write a css media query where your page breaks to adjust the div and its nested elements

here is a css3 media query template gist you can use https://gist.github.com/marcobarbosa/798569

or better yet, I would use bootstrap's responsive grid http://getbootstrap.com/2.3.2/

Upvotes: 1

Related Questions