Cant scroll down for mobile site

1

Hi team.
I purchased boostrap theme “Church” and I tried to see the webpage by smart phone (i-Phone12pro).
But I cant scroll down.
I can move to categories from menu bar but the menu doesn’t close automatically.
Please kindly advice how to resolve following things.

  1. Cant scroll down in mobile page
  2. The menu doesn’t close automatically in mobile page

Thank you.

2

Hey there

may I take a closer look? please provide URL of the website and I will take a look

Regards

3

Hi team,

Here you are.

https://masa-atmnlf.github.io/church/#

Thank you.

4

Hey there

Try this CSS code:

.owl-carousel.owl-drag .owl-item {
    -ms-touch-action: auto;
    touch-action: auto;
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}

Regards

6

Hi team,
Thank you for your reply.
I added your code on the bottom of “style.css” and I can scroll down now.
However the menu doesn’t close automatically in mobile page.

Please kindly advice for this issues.

Thank you.

7

Hi there

Thats good :slight_smile:
Sorry but menus are not supposed to close automatically, you need to click on the cos button, this is by default

Regards

8

Hi team,

Thank you.
I resolved it by myself.
Thank you again for your support.

Best regards.

9

That’s great :slight_smile:

Have a good weekend

10

Here are a few steps that you can try to resolve the issues you mentioned:

  1. Check if the viewport meta tag is present in the head section of your HTML code. The viewport meta tag tells the browser how to adjust the content to fit the screen size. Here’s an example of what it should look like:

  2. Make sure that the CSS properties for the mobile devices are correctly set in your stylesheet. Bootstrap provides various classes for responsive design, such as .col-sm-* and .col-md-*. You can use these classes to define how the layout should change for different screen sizes. For example, if you want a section to take up the full width of the screen on a mobile device, you can add the class .col-12 to it.

  3. To fix the issue with the menu not closing automatically on mobile devices, you can add a few lines of JavaScript code. Bootstrap provides a built-in script that handles the mobile menu behavior. Make sure that the script is included in your HTML code, and add the following code to the end of the script:

javascript
$(‘.navbar-collapse a’).click(function(){
$(“.navbar-collapse”).collapse(‘hide’);
});
This code will close the mobile menu when a link is clicked. I’ve solved this for https://beiteck.com/rent

I hope these steps help you resolve the issues you are facing with your Bootstrap theme. Let me know if you have any further questions or concerns!

1 Like
11

Wow!
Thank you so much!
Appreciate your advice!!

Best regards.

12

Thank you so much @Aniza789 your reply is very appreciated :slight_smile:

Have a good week