Responsiveness #40937

Vandan1423 · 2024-10-11T11:52:32Z

Vandan1423
Oct 11, 2024

See the following webpage made purely using bootstrap, When I am checking the responsiveness in the safari it is not responding but when I can checking it in the chrome the responsiveness is working fine can anyone explain me

IMG_1689.mov

IMG_1690.mov

My code is --

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <title>Pricing Page</title>
</head>

<body>
    <h1 class="text-center">Pricing</h1>
    <p class="text-center">Please check out our most effective payment models</p>
    <div class="row text-center justify-content-evenly">
        <div class="card col-sm-5 col-md-3 mb-3 me-3">
            <div class="card-header">
                <h4>Free</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title">$0/mo</h1>
                <ul class="list-unstyled">
                    <li>10 users included</li>
                    <li>2GB of storage</li>
                    <li>Email support</li>
                </ul>
                <button href="#" class="btn btn-outline-primary">Sign up for free</button>
            </div>
        </div>
        <div class="card col-sm-5 col-md-3 mb-3 me-3">
            <div class="card-header">
                <h4>Pro</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title">$15/mo</h1>
                <ul class="list-unstyled">
                    <li>20 users included</li>
                    <li>10GB of storage</li>
                    <li>Priority email support</li>
                </ul>
                <button href="#" class="btn btn-primary">Get started</button>
            </div>
        </div>
        <div class="card col-sm-10 col-md-3 mb-3 me-3">
            <div class="card-header">
                <h4>Enterprise</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title">$29/mo</h1>
                <ul class="list-unstyled">
                    <li>30 users included</li>
                    <li>15 GB of storage</li>
                    <li>Phone & email support</li>
                </ul>
                <button href="#" class="btn btn-primary">Contactus</button>
            </div>
        </div>
    </div>
</body>

</html>

julien-deramond · 2024-10-11T13:09:37Z

julien-deramond
Oct 11, 2024
Maintainer

Hey. I've created a CodePen for your example. Seems to be responsive on Safari too.
Which version of macOS/Safari are you using?

4 replies

Vandan1423 Oct 12, 2024
Author

I am using 18.0.1

julien-deramond Oct 12, 2024
Maintainer

OK, so not an old version. Tested the CodePen with 17.5 and earlier versions, and it works well. Have you the same issue with the CodePen?

Vandan1423 Oct 12, 2024
Author

Actually with codepen its working, but when I copy and pasted your code in my code editor and open the web page I am facing the same issue, this issue is with this file only not with others, Below is the exact problem what I am facing, actually when I am starting with the minimum size possible its responsive well enough, but as I am decreasing the size of my screen then same issue is there.

IMG_1701-2.mp4

julien-deramond Oct 13, 2024
Maintainer

That's odd. I launched a real server using the same file setup as you and didn't encounter any issues with Safari 17.5. I also tested it on BrowserStack with the exact same version of Safari you're using, and it worked fine there as well. Honestly, I'm not sure what might be causing the problem on your end. Hopefully, someone else in the community can provide some insights.

ynng3 · 2024-10-21T02:49:34Z

ynng3
Oct 21, 2024

I have read the entire conversation, and it doesn't seem to be a code issue.

Are you using any Safari browser extensions that might interfere with normal browsing?

Extensions installed on the user's Safari can impact responsive behavior. Ad blockers or privacy-related extensions, in particular, can interfere with CSS or JavaScript loading.

Please test again with all extensions disabled.
To disable extensions in Safari: Go to the "Safari" menu > "Preferences" > "Extensions" tab and turn off all extensions.

0 replies

aniruddhaadak80 · 2024-10-28T17:13:57Z

aniruddhaadak80
Oct 28, 2024

Hi @Vandan1423 ,

The responsiveness issue in Safari might be related to the CSS or JavaScript. Here's a quick checklist with code suggestions:

Viewport Meta Tag: Ensure your viewport tag is correctly set. Yours looks good:
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```

Flexbox and Grid CSS: Double-check the Bootstrap classes used for layout. Sometimes, Safari has issues with flex properties. Here’s a simplified structure:

<div class="container">
    <div class="row">
        <div class="col-sm-5 col-md-3 mb-3">...</div>
        <div class="col-sm-5 col-md-3 mb-3">...</div>
        <div class="col-sm-10 col-md-3 mb-3">...</div>
    </div>
</div>

CSS Reset: Sometimes a CSS reset helps:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Inspect Element: Use Safari’s Developer Tools (Right-click > Inspect Element) to check for any CSS conflicts.
Update Safari: Ensure that you're using the latest version of Safari as compatibility can vary.

If issues persist, consider sharing the specific parts of your CSS that might be causing layout problems.

Thanks!

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bootstrap

Responsiveness #40937

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 4 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Bootstrap

Responsiveness #40937

Vandan1423 Oct 11, 2024

Replies: 3 comments · 4 replies

julien-deramond Oct 11, 2024 Maintainer

Vandan1423 Oct 12, 2024 Author

julien-deramond Oct 12, 2024 Maintainer

Vandan1423 Oct 12, 2024 Author

julien-deramond Oct 13, 2024 Maintainer

ynng3 Oct 21, 2024

aniruddhaadak80 Oct 28, 2024

Vandan1423
Oct 11, 2024

Replies: 3 comments 4 replies

julien-deramond
Oct 11, 2024
Maintainer

Vandan1423 Oct 12, 2024
Author

julien-deramond Oct 12, 2024
Maintainer

Vandan1423 Oct 12, 2024
Author

julien-deramond Oct 13, 2024
Maintainer

ynng3
Oct 21, 2024

aniruddhaadak80
Oct 28, 2024