CODEWITHSUNDEEP
jqueryhtmlcss
user782104
user782104

Reputation: 13555

Set container to full width and not able to scroll horizontal on mobile device

Here is the test link:

http://kotechweb.com/ig112/

Right now on mobile device, is scroll to middle horizontally,

I would like to achieve is like this

enter image description here

the container is full width on the mobile and disable to scroll horizontally

Here is the code:

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

And scroll to middle 

scrollTo(($(document).width() - $(window).width()) / 2, 0);

The background is set to 1903px as doesn't want the center content move left when resize the window

Thanks a lot for helping.

Upvotes: 0

Views: 87

Answers (1)

Nathaniel Flick
Nathaniel Flick

Reputation: 2963

You are doing some things with your layout that will cause it to not work well responsively and the viewport measurements will probably be off (I don't have the proper device to test this but fixing these things should fix your problem):

  1. Set initial scale to 1. Why do you have it set for .5? I imagine to compensate for your layout issues? Your static width for the content container won't allow it to be responsive which is probably what you're fighting against.

  2. Set .my_box { max-width: 1903px; }

  3. .my_box container inline style set to no-repeat, scroll, and center center, then use background-size: cover so it always fits:

background: transparent url("./assets/image/bg5.jpg") no-repeat scroll center center / cover; background-size: cover; }

  1. Then test your js and you will find scrolling is going to the proper place, 1/2 way down your page but you don't want this, you want it to scroll to an anchor. Put the anchor (hash/id) where you want the scroll to go then set your jQuery to zoom there after page load.

Let me know how this goes.

Upvotes: 1

Related Questions