Issue with CSS: 200vw not scaling correctly for mobile devices

I'm attempting to create a horizontal slide effect between two div elements, so here is the HTML code:

<div id="container">
  <div class="viewport-1">
    <div class="inner-div">
      <h1>Viewport background 1</h1></div>
  </div>
  <div class="viewport-2">
    <div class="inner-div">
      <h1>Viewport background 2</h1></div>
  </div>
</div>

I have set the container width to 200vw and each div inside it to 100vw. The code works well on desktop view, but doesn't function properly on mobile devices.

Check out the CodePen demo here.

javascriptjqueryhtmlcss

Answer №1

Have you considered using the viewport tag for your issue? It might provide some assistance.

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

Answer №2

Many browsers do not fully support CSS units vh and vw, which could be why your code isn't working properly on the mobile device you're testing it on. It might be better to use rem and percentages instead. An example of this can be seen in my modified version: http://codepen.io/kvackkvack/pen/mVOePa. Here are the changes I made:

#container {
   ...
   /* (old version) width: 200vh; */
   width: 200rem;
   position: absolute;
   left: 0; top: 0; bottom: 0;
   ...
}
.viewport-1, .viewport-2 {
  /* (old version) width: 100vh;
  height: 100vh; */
  width: 100rem;
  height: 100%;
}

It's important to note that using percentages covers the full page, while vw and vh are always a percentage of the screen size. If you plan on using vw and vh, consider using "rem" as an alternative, which functions similarly to vh. More information on this can be found at https://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing/.

Answer №3

It seems like the mobile browser on your device is not compatible with this feature.

In addition to vw units, consider using percentages as a backup in case of compatibility issues with certain browsers.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: The internal modules of node.js encountered an issue while loading causing an error to be thrown at

After installing Node.js (LTS version) from their website on my Windows system, I created a new directory named "mynode" and placed a text file inside it called "hellonode.js". Upon trying to run node hellonode.js in the command prompt after changing direc ...

javascriptnode.jsnpm

Is it possible to create a CSS1 sprite animation triggered by a mouse hover

Is there a way to create sequential image loading on mouse hover for a CSS1 Sprite, similar to an animation? Please refrain from suggesting CSS3 solutions as not all browsers fully support CSS3 animations. Thank you. ...

cssanimationhovermousesprite

Checkmate Validation

I've been trying to utilize the functionality provided by My goal is to use ajax to submit the form only if there are no errors present. No matter what I attempt, I can't seem to get it to work correctly. Looking for error validation $(docume ...

jquery

Having trouble with AngularJS not sending form values properly?

I have a code snippet in my app.js file where I am trying to pass the value of email to a file named handler.php. $scope.doForget={email:''}; $scope.doForget = function (customer) { //email = $scope.forget.email; For Testing i am hardcoding ...

javascriptphpangularjs

Utilizing JQuery Template to Invoke JavaScript Functions

If I have the following JSON object structure: ITEMS is an array with one element, and FILTER is another array with 3 items in it. Description: "churches with some restrictions" ITEMS: {...} [0]: {...} FILTER: {...} ...

javascriptjqueryjsontemplatesjquery-templates

Navigating the terrain of multiple checkboxes in React and gathering all the checked boxes

I am currently developing a filter component that allows for the selection of multiple checkboxes. My goal is to toggle the state of the checkboxes, store the checked ones in an array, and remove any unchecked checkboxes from the array. Despite my attemp ...

javascriptreactjstypescriptreact-hooksreact-state-management

What is the best way to connect a string to a scoped variable in a view?

I'm looking to connect a string to a scope variable that will be determined by user input in an input field located within a specific view. The goal is for the combined string and scope variable value to appear in another div within the view. Here&ap ...

javascriptangularjsionic-frameworkngcordovaionic-view

calendar input type for both internet explorer and firefox

I frequently utilize the input type calendar on my website's intranet, but unfortunately, it only seems to work properly in Google Chrome and not in other browsers. As a solution, I have developed a code for a CSS/JavaScript calendar that I would like ...

javascriptfirefoxinputcalendar

Maintain the current application state within a modal until the subsequent click using Jquery

Due to the challenges faced with drag and drop functionality on slow mobile devices, I am considering implementing a modal approach for moving elements from one place to another. Here is how it would work: When a user clicks on an item, it is visually ma ...

javascriptjquery

Is it possible to implement PortalVue in multiple Vue.js single file components?

While working on Vue.js (single file components), I have discovered three methods of passing data around: local state/props, store, and utilizing PortalVue. Through my experiments with PortalVue, I successfully implemented both portal and portal-target wit ...

javascriptvue.jsvue-component

The incremental BR tag counter seems to be malfunctioning, there appears to be a missing element

Can anyone help me with the following code? I'm trying to add an incremental counter next to each BR tag in a lyric song, but it doesn't seem to be working as expected. <?php $lyrics = "<p>Every time when I look in the ...

javascriptphpjquery

Adding a unique field to a specifically tailored post type

I'm dealing with a plugin-generated component that showcases articles from a custom post type, each with the class post-id. Unfortunately, I can't modify the plugin's files in the child theme to make changes, so I have to create a custom fun ...

phphtmljquerywordpressadvanced-custom-fields

How can I eliminate the CSS value that was inherited?

Looking for a way to eliminate the effect of an inherited CSS property with Jquery. .class1 #id1 div.class2 input.class-input{ border-color: #bbb3b9 #c7c1c6 #c7c1c6; } Can someone explain how to delete this "border-color"? Thanks. ...

javascriptjqueryhtmlcss

What are the advantages of importing CSS files from JS source code with webpack, rather than building CSS in isolation as traditionally done?

If you're looking for information on how to load CSS with webpack, check out the documentation here: https://webpack.js.org/guides/asset-management/#loading-css1 The webpack documentation suggests importing CSS files from JavaScript code and using ex ...

csswebpack

Use jQuery to trigger a click event when an element is in focus, unless it was clicked to

I am currently developing a website using the MDL framework. One issue I encountered is that there is no default select form element provided. After some research, I found a solution by utilizing a menu component that displays when the input is clicked. Th ...

javascriptjqueryhtmlmaterial-design-lite

Issue with React-select: custom Control prevents select components from rendering

Implementing react-select@next and referring to the guide here for custom Control components is not yielding the desired outcome. import TextField from "@material-ui/core/TextField"; import Select from "react-select"; const InputComponent = (props) => ...

javascriptreactjsmaterial-designmaterial-uireact-select

Maximizing the efficiency of critical rendering path while utilizing bootstrap

Is it feasible to enhance the critical rendering path (like Google and Facebook) while utilizing Bootstrap 3? Facebook opted for inlining styles connected to the header and sidebars. Meanwhile, Google inlined all styles since they have minimal styles for ...

csstwitter-bootstrap-3

Several middlewares using router.params()

Is it possible to include multiple middlewares as parameters in the function router.params() in Node-Express? I currently have the following setup: const checkAuth = (req, res, next) => {console.log("checking auth"); next()} const checkAuth = ...

javascriptnode.jsreactjsexpressrouter

Cannot save PDF files to a server using jsPDF

I'm new to this community and still learning javascript & php. I am having trouble saving my PDFs with jsPDF to the local storage on the server (automatically generated). It used to work in the past, but now when I add Canvas (javascript) to my HTML, ...

javascriptphpajaxjspdf

Reveal or conceal elements with a touch of animation

I am in the process of building my own website and I've been working on implementing a button that can toggle the visibility of a specific div element. While the functionality is there, I really want to incorporate an animation to enhance it. I attem ...

javascripthtmlcss