Menu icon Foundation
Foundation with High resolution laptop showing mobile like layout

I am developing a website on my laptop which is a Yoga 2 pro with a Resolution of 3200x1800. I'm having a hard time having it display as though it is on a "large screen". At default 100% zoom the large column classes are not accurately represented, for example the code as follows

on default 100% zoom It doesn't share the same row at all, instead the next column jumps down to another row. At 90% it somehow becaomes a proper layout (though still a bit too large) and the two columns share the row.

        <div id="header" class="row">
            <div class="large-12 column">
                <h1>Your PVR Gateway</h1>
            </div>
        </div>
        <div class="row">
            <div id="sideNav" class="large-4 column">SomeContent</div>
            <div id="content" class="large-8 column">
                <div class="row">
                    <div class="small-centered column">
                        Testing
                        <div ng-view></div>
                    </div>
                </div>
            </div>
        </div>

            

         

Untitled

I am developing a website on my laptop which is a Yoga 2 pro with a Resolution of 3200x1800. I'm having a hard time having it display as though it is on a "large screen". At default 100% zoom the large column classes are not accurately represented, for example the code as follows

on default 100% zoom It doesn't share the same row at all, instead the next column jumps down to another row. At 90% it somehow becaomes a proper layout (though still a bit too large) and the two columns share the row.

        <div id="header" class="row">
            <div class="large-12 column">
                <h1>Your PVR Gateway</h1>
            </div>
        </div>
        <div class="row">
            <div id="sideNav" class="large-4 column">SomeContent</div>
            <div id="content" class="large-8 column">
                <div class="row">
                    <div class="small-centered column">
                        Testing
                        <div ng-view></div>
                    </div>
                </div>
            </div>
        </div>

            

         

Untitled
Ahmad Milzam almost 4 years ago

Hello there,
Do you already have a meta viewport tag in your document head?
something like this,
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

VRStechnologies 8 months ago

Hi Danial/Ahmad,

 

Thanks for helped in coding, i used danial code with that in header tag i mentioned viewport as ahmad mentioned.

 

Laptop Rental Dubai