PWA iPhone - white line covers the footer

[amrutadotorg]

Hi,

I've noticed that when the website is opened as a PWA app on an iPhone, a white line (iPhone feature) covers the footer. It might be helpful to raise the footer slightly to avoid this issue.

tested as: "display": "standalone" live example: http://learnsahajayoga.org

Thank you!

[amrutadotorg]

After upgrading I'm still having issues with the footer. I tried setting:

.page {
  /* Leave space for the footer */
  min-height: calc(100% - 15rem);
}

[lovasoa]

Is there some custom css applied in your screenshot ? I see significantly more whitespace below the footer in my browser's mobile device simulator:

[amrutadotorg]

no, but please take a look, can you add manifest.json to Your page so I can test PWA?

/* #151f2c - background color for dark dark */
/* #F6F8FB - background color for the light theme */
/* logo main color #ff663c */

/* Define CSS Variables */
:root {
    --link-color-light: #B22222; /* Firebrick for light theme links */
    --link-color-dark: #FF7F50; /* Coral for dark theme links */
    --highlight-bg: #FFA500; /* Orange highlight background */
    --highlight-color-light: #000000; /* Black highlight text for light theme */
    --highlight-color-dark: #000000; /* Light gray highlight text for dark theme */
    --border-color-focus: #FF6F61; /* Coral Red border color */
    --selection-bg: #FFA500; /* Light Blue selection background */
    --selection-text: #000000; /* Black selection text */
    --primary-rgb: 255, 99, 60; /* Primary RGB color */
    --tblr-primary-rgb:  255, 99, 60; 
    --tblr-primary: #B22222 ;
}

/* Table Styling */
#fit-content-table {
    width: fit-content;
}

/* Link Styling */
body:not([data-bs-theme="dark"]) a,
body[data-bs-theme="dark"] a {
    text-decoration: none; /* Remove underline for a cleaner look */
    transition: color 0.3s ease; /* Smooth transition for color change on hover */
}

body:not([data-bs-theme="dark"]) a {
    color: var(--link-color-light); /* Base color for links in light theme */
}

body[data-bs-theme="dark"] a {
    color: var(--link-color-dark); /* Base color for links in dark theme */
}

/* Avatar Styling */
.avatar {
    background: none;
    box-shadow: none;
}

/* Form Control Focus */
.form-control:focus {
    border-color: var(--border-color-focus); /* Desired border color */
    outline: none; /* Removes the default outline */
}

/* Headline Text Highlighting */
body:not([data-bs-theme="dark"]) #headline strong,
body[data-bs-theme="dark"] #headline strong,
mark {
    background-color: var(--highlight-bg); /* Highlight background color */
    font-weight: bold;
    padding: 2px 4px; /* Adds padding for highlight visibility */
    border-radius: 3px; /* Rounded corners */
}

body:not([data-bs-theme="dark"]) #headline strong,
mark {
    color: var(--highlight-color-light); /* Dark text for contrast in light theme */
}

body[data-bs-theme="dark"] #headline strong {
    color: var(--highlight-color-dark); /* Dark text for contrast in dark theme */
}

/* Video Container Styling */
#video {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#video .card {
    width: 100%;
    max-width: 800px; /* Maximum width for larger screens */
    margin-bottom: 1rem; /* Margin for spacing */
}

#video .card-body {
    padding: 0; /* Remove padding for full-width video */
}

#video iframe {
    width: 100%;
    height: 450px; /* Initial height for large screens */
}

/* Responsive Video Styling */
@media (max-width: 768px) {
    #video iframe {
        height: 300px; /* Height adjustment for smaller screens */
    }
}

@media (max-width: 576px) {
    #video iframe {
        height: 200px; /* Height adjustment for the smallest screens */
    }
}

/* Button Styling */
.btn-outline-success, .btn-primary {
    border-color: var(--border-color-focus);
    color: var(--border-color-focus);
    background-color: transparent;
    transition: background-color 0.3s, color 0.3s;
    --tblr-btn-active-bg: rgba(var(--tblr-primary-rgb), .8);
    --tblr-btn-hover-bg: rgba(var(--tblr-primary-rgb), .8);
    --tblr-btn-disabled-bg: var(--tblr-primary);

}

.btn-outline-success:hover, .btn-primary:hover {
    background-color: var(--border-color-focus);
    color: #000000;
}

/* Text Selection Styling */
::selection {
    background-color: var(--selection-bg); /* Light blue background */
    color: var(--selection-text); /* Black text */
}

body[data-bs-theme="dark"] ::selection {
    background-color: var(--selection-bg); /* Same light blue background */
    color: var(--selection-text); /* Same black text */
}

#post_content_rtl ~ p {
    direction: rtl;
    text-align: right;
}

[lovasoa]

I'm not sure I understand your answer. Is there some custom css applied in your screenshot ? You are saying no, but then paste what looks like your custom css.

Can you confirm whether you have these styling problems without any customization ?

[amrutadotorg]

No. The css was just a prove of that. Here is the screenshot without any css applied