CODEWITHSUNDEEP
androidhtmlcsstablet
Rajat Gupta
Rajat Gupta

Reputation: 26607

Scale up/zoom 980px wide webpages to occupy full width on tablets/small screen devices

I designed my webpages for 980px screen width resolutions. On tablets/small screen devices, though the resolutions width is more than 980px but (obviously) things look much smaller & the pages don't yet occupy full width, so there is some scope for pages to look a bit bigger.

I want the webpages to scale up/zoom to occupy full available screen width in mobile devices/tablets.

Upvotes: 0

Views: 462

Answers (2)

Colin Wiseman
Colin Wiseman

Reputation: 868

Have you tried adding the viewport meta tags at the top of your HTML?

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

That will make your page display properly on mobile devices.

Also add in e.g.

.site { width: 100%; max-width: 980px }
@media all and (min-width: 981px)
{
  .site { max-width: 1200px; }
}

Where .site is changed to whatever you have. This second part my cause other layout issues while the meta tag will scale things up a bit without layout issues. But both are needed together for tablets/mobiles to display your css and HTML properly.

I didn't want to put max-width: 100%; in the CSS above as you may come across some very wide browsers which would completely break your layout. It's always best to find the maximum you want your design to stretch to e.g. 1200px.

Upvotes: 1

AK_
AK_

Reputation: 71

Try setting 'max-width:100%;' for things you want to extend to full screen for devices with screen larger than 980px:

@media (min-width: 980px){
  .your-class{
    max-width:100%;
  }
}

Upvotes: 0

Related Questions