0

I have a scenario where on a certain page there is a form with two radio buttons and two normal buttons "submit" and "cancel".

In normal Viewport it works fine, but when it comes to mobile devices there are some devices and browsers, like Edge, where these Submit and Cancel buttons are not visible. When I try to scroll down, it’s not working. As I had tested on BrowserStack for iOS and Android, there is this issue with some devices, so how can I fix this, making sure it will work for all devices and browsers?

I have given padding-bottom of 80 pixels using a media query of max-width 576 pixels where md is 576 pixels.

@media (max-width: map-get($grid-breakpoints, md)) {
  .app-overlay{
    padding-bottom: 80px;
  }
}
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
ali
  • 492
  • 2
  • 7
  • 18
  • @AbhishekK top-nav-height is 56px. ``` .app-overlay { position: fixed; top: $top-nav-height; left: 0; height: calc(100vh - #{$top-nav-height}); width: 100%; z-index: 1000; overflow-y: scroll; } ``` – ali Jul 24 '23 at 06:03
  • @AbhishekK note that SO requires code to be within the question, not on an external site. This is because SO is trying to build up a set of useful questions and answers for future readers, not just solve the issue for one user at a point in time, and external sites can easily disappear or change. – A Haworth Jul 24 '23 at 08:12
  • What is *map-get*? [From Sass](https://stackoverflow.com/questions/39254520/sass-whats-the-difference-between-map-get-and-simple-variable)? – Peter Mortensen Jul 24 '23 at 14:43
  • Please provide [a minimal code snippet](https://stackoverflow.com/help/minimal-reproducible-example) which can **reproduce** the issue. The code you provide can't be run. – Yu Zhou Jul 25 '23 at 07:06

1 Answers1

-1

To deal with scrolling on different mobile devices using media queries, you can pursue these guidelines:

  1. Check the problem: Initially, you need to validate and recognize the devices where the "submit" and "cancel" buttons are not visible, and scrolling is not working as anticipated. You mentioned testing on BrowserStack for iOS and Android, so take note of the specific devices and their screen dimensions where the issue is occurring.

  2. Utilize the viewport meta tag: Ensure that your HTML file contains the viewport meta tag. This tag enables you to control the viewport's behavior on mobile devices. For instance, you can add the following meta tag to your HTML head section:

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

  1. Check for overlapping elements: Verify that there are no overlapping elements or layout problems that might be causing the "submit" and "cancel" buttons to become hidden on certain devices.

  2. Modify the media query: If the problem is specifically related to the padding-bottom not providing sufficient space for scrolling, you can adjust the padding value for different devices. Instead of using a fixed 80px padding, you can try using a percentage-based padding, which might work better across different screen sizes. For instance:

@media (max-width: 576px) {
  .app-overlay {
    padding-bottom: 10%; /* Adjust the percentage as needed */
  }
}

  1. Test and fine-tune: After making changes, thoroughly test your page on different mobile devices and emulators to ensure that scrolling works properly, and the "submit" and "cancel" buttons are visible on all devices.

  2. Consider responsive design: If you encounter further issues, contemplate making your form and buttons more responsive by using flexible layouts and elements that adapt to various screen sizes automatically.

flournoy bristal
  • 1
  • 2
  • This is generalised waffle. Please tighten up your answer so it is really helpful and not just a dump of vague ideas. – A Haworth Jul 24 '23 at 08:15
  • 1
    @AHaworth The answer looks like ChatGPT-generated vague waffle to me – DavidW Jul 24 '23 at 08:51
  • @DavidW yes, I suspected so too but didn't like to point the finger just in case, and in the hope the answer will be firmed up to say something definite and useful (or the answerer removes it). – A Haworth Jul 24 '23 at 10:15