Issues with Responsiveness and Carousel on Mobile Devices

It works for me when I add it to the end of style.css.

/* Spinner */
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-out, visibility 0s linear 0.5s;
    z-index: 99999;
}
#spinner.show {
    transition: opacity 0.8s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

/* Back to top button */
.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    z-index: 99;
    background-color: #a50808;
    color: #fff;
    transition: background-color 0.5s, color 0.5s;
}
.back-to-top:hover {
    background-color: #0056b3;
    color: #fff;
}

/* Button styles */
.btn {
    text-transform: uppercase;
    font-weight: 500;
    transition: 0.5s;
}
.btn.btn-primary {
    box-shadow: inset 0 0 0 0 #083be2;
}
.btn.btn-primary:hover {
    box-shadow: inset 200px 0 0 0 #083be2 !important;
    color: #fff !important;
}
.btn.btn-dark {
    box-shadow: inset 0 0 0 0 #083be2;
}
.btn.btn-dark:hover {
    box-shadow: inset 200px 0 0 0 #025e33;
    color: #225202 !important;
}

/* Navbar styles */
.navbar .navbar-nav {
    padding: 15px 0;
}
.navbar .navbar-nav .nav-link {
    padding: 15px;
    color: var(--bs-white);
    font-weight: 500;
    font-size: 20px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    outline: 0;
    transition: 0.5s;
}
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link:hover {
    color: #0f4aee;
    transition: 0.5s;
}

/* Responsive navbar */
@media (max-width: 768px) {
    .navbar-brand img {
        width: 75px;
        height: 75px;
    }
}
.navbar-toggler {
    background: var(--bs-secondary);
    color: var(--bs-light) !important;
    padding: 5px 12px;
    border: 2px solid #083be2 !important;
}

/* Carousel styles */
.carousel-item {
    position: relative;
}
.carousel-item::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.377);
}
.carousel-caption {
    height: 100%;
    display: flex;
    align-items: center;
    text-align: start;
    z-index: 1;
}
.carousel-control-prev,
.carousel-control-next {
    width: 80px;
    height: 60px;
    position: absolute;
    top: 50%;
    background: #083be2;
    border-radius: 30px;
    transition: 0.5s;
    opacity: 1;
}
.carousel-control-prev {
    left: 0;
    border-radius: 0 30px 30px 0;
}
.carousel-control-next {
    right: 0;
    border-radius: 30px 0 0 30px;
}

/* Carousel indicators */
#carouselId .carousel-indicators li {
    width: 24px;
    height: 24px;
    background: var(--bs-dark);
    border: 2px solid #083be2;
    border-radius: 24px;
    margin: 0 10px 30px 10px;
}
#carouselId .carousel-indicators li.active {
    background: #04ff64 !important;
}

/* Responsive carousel */
@media (max-width: 768px) {
    .carousel-item {
        width: 100%;
        height: 400px;
    }
    .carousel-item img {
        height: 400px;
    }
    .carousel-control-next,
    .carousel-control-prev {
        display: none;
    }
}

/* About section */
.about-img {
    width: 100%;
    height: 70%;
    position: relative;
    padding: 30px;
    overflow: hidden;
}
.about-img::before,
.about-img::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 1;
    border-radius: 10px;
}
.about-img::before {
    height: 40%;
    top: 0;
    background: #2341ec;
}
.about-img::after {
    height: 70%;
    bottom: 0;
    background: #1f5e37;
}
.about-img img {
    position: relative;
    z-index: 2;
    border-radius: 10px;
}
.about-item h5 {
    margin-bottom: 20px;
    padding: 10px 20px;
    background-color: #f8f9fa;
    border-radius: 5px;
    display: inline-block;
}
.about-item h1 {
    margin-bottom: 20px;
}
.about-item p {
    margin-bottom: 20px;
    line-height: 1.6;
}
.about-item .row {
    margin-top: 30px;
}

/* Responsive about section */
@media (max-width: 768px) {
    .about-img,
    .about-item {
        text-align: center;
    }
    .about-img img {
        width: 100%;
        height: auto;
    }
    .row {
        display: flex;
        flex-wrap: wrap;
    }
    .row .col-3 {
        flex: 1 1 45%;
        margin-bottom: 20px;
    }
}

/* Contact links */
.contact-link a h5,
.contact-link a i {
    transition: 0.5s;
}
.contact-link a h5:hover,
.contact-link a i:hover {
    color: #083be2 !important;
}

/* Footer styles */
.footer {
    background: linear-gradient(rgba(3, 67, 110, 0.945), rgba(0, 14, 8, 0.7)), url(https://zedacalmacalçadas.pt/img/fotoprincipal.webp) center center no-repeat;
    background-size: cover;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 6rem;
}
.footer-item,
.footer-item a {
    color: rgba(255, 255, 255, 0.7);
    text-transform: capitalize;
}
.copyright .copyright-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}
.whatsapp-icon {
    background-color: #25d366;
    color: #fff;
}
.whatsapp-icon:hover {
    background-color: #0b682d;
    color: #fff;
}
.email-icon {
    color: #007bff;
    background-color: transparent;
}
.email-icon:hover {
    color: #0056b3;
}
.email-container {
    margin-top: 1px;
}
.email-text {
    margin-left: 15px;
}
.copyright .text-md-end small {
    font-size: 0.6em;
}

/* FontAwesome fonts */
@font-face {
    font-family: 'FontAwesome';
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/webfonts/fa-solid-900.woff2') format('woff2'),
         url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/webfonts/fa-solid-900.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'FontAwesomeBrands';
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/webfonts/fa-brands-400.woff2') format('woff2'),
         url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/webfonts/fa-brands-400.woff') format('woff');
    font-display: swap;
}

/* Animation */
.animated {
    animation-fill-mode: both;
}

/* Bootstrap icons */
.bi {
    color: yellow;
    font-size: 4em;
}

/* In your css/style.css */
.page-header {
    padding: 5rem 0; /* Adjust padding as needed */
    text-align: center;
    background-color: #343a40; /* Background color */
    color: white; /* Text color */
    position: relative;
}

.page-header h1 {
    font-size: 4rem; /* Adjust font size as needed */
    margin-bottom: 1rem;
    animation: slideInDown 1s; /* Example animation */
}

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
.container-fluid.navbar-bg{
  background:orange;/* change to suit*/
}

If it didn’t work for you then either you had a typo or you didn’t clear your cache. CSS files are cached but inline styles won’t be cached.

I’m guessing that your ‘adblock browser’ is blocking one of the scripts and stopping the page from working properly. Unfortunately I know nothing about adblock browsers and I only use the recommended browser on the device I’m using. See if there is a less aggressive option in your setting for the adblock.

Have you tried using the default browser on that device to see if there’s an issue? If there’s no issue in Chrome, Firefox or Safari/IOS then the issue is likely your adblock settings.

1 Like

Yes actually its working , just adapted the changes from the HTML to CSS and with the help of IA made the changes so things could work from the CSS. Another question i got is about the Google page insights , how could i fix the perfomance issues that are appearing in there , been having that challenge aswell for awhile

I suggest you start a new thread on that subject as I’m only interested in answering css and html layout questions:) Google page insights is not a rabbit hole I want to go down. :wink:

2 Likes

Sure . I been having problems with the About section , when i tried to change some of the about item img to the css file , the image from the about disappeared so i had to rollback and keep the code from the style in html , what you think could be causing the issue ?

Did you have the correct path to the image?

If the path to the image is from a css folder then that’s not the same path as if the css was inline in the html page.


Used Ai to help-me put the some of the about img code into the respective place in CSS file and now it doesnt appear fully 100% and in ipad air and surface pro 7 devices appears similar to this where 80% or 70% appears

That’s because that’s what you told it to do here.:slight_smile:

.about-img {
    width: 100%;
    height: 70%;
    position: relative;
    padding: 30px;
    overflow: hidden;
}

Remove the height:70%.

If you want the image smaller then you need to address the image and not its wrapper. Even then you’d most likely reduce the width which would automatically reduce the height.

As I said a number of times you have to be very careful with using fixed heights. Most of the time you don’t want them. I also note that you have too much vertical padding in most cases also with multiple adjoining elements having padding.

1 Like

Could you clarify me a bit what you mean about the vertical padding ?

Your post #29 is showing big gap’s between the vertical elements. If that’s what you wanted then don’t worry but otherwise look at adjusting the padding you have set.

1 Like

Thats supposed to be like that because i tried to reduce the green one because wanted to make them balanced with same measures but when i tried it , it would make the green one smaller and leave a blank space in between

Update , just changed the values to 55% on both heights and works fine :grin:

That’s not really the right answer although it may suffice for you. :slight_smile:

As I mentioned a few times you should avoid using fixed heights (in most cases) on your containers. Removing the 70% as I mentioned above would fix the issue. The rest of the problem was your padding.

Images need to maintain their aspect ratio so if you said height:55% for an image then the width would need to be set to auto (and vice versa).otherwise the image is distorted from it’s natural aspect ratio.

.about-img {
    width: 100%;
    position: relative;
    overflow: hidden;
}
.about-img::before,
.about-img::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 1;
    border-radius: 10px;
}
.about-img::before {
    top: 0;
    height: 50%; /* Ensures no gap */
    background: #2341ec;
}
.about-img::after {
    top: 50%; /* Ensures no gap */
    height: 50%; /* Ensures no gap */
    background: #1f5e37;
}
.about-img img {
    position: relative;
    z-index: 2;
    width: 100%; /* Ensure the image fills the container width */
    height: auto; /* Ensure the aspect ratio is maintained */
    border-radius: 10px;
}
.about-item h5 {
    margin-bottom: 20px;
    padding: 10px 20px;
    background-color: #f8f9fa;
    border-radius: 5px;
    display: inline-block;
}

something like this would work ?

1 Like

Based on your current about page I would make these extra changes.

.experiences {
  position: relative;
  z-index: 2;
  background: transparent !important;
  color: #fff;
  text-align: center;
}
.about-img:before {
  border-radius: 10px 10px 0 0;
}
.about-img:after {
  border-radius: 0 0 10px 10px;
}

@media screen and (max-width: 992px) {
  .about-img img {
    width: 60%;
    margin: auto;
    display: block;
  }
}

The blue and green boxes are hiding the experiences text so I put the text on top. I removed the border radius from where the blue and green join. I would simply have used a 2 tone background gradient for this but I guess you may have some animations going on and you will need the separate elements.

I also reduced the image size to look better from 992px and smaller .

The result is this:

1 Like

Could it be related to the viewport settings or missing meta tags? Those often cause layout issues on mobile.

No the viewport meta tag is not missing and is correct.

It actually looks better with the 48 under the image in comparison with the animation that was doing before

1 Like

Hello , i changed to glider library for the carrousel and i need some help with the css on it to make it responsive as the previous one was with the objets sizing properly according to each device . The css i am using is -

       body, html {
        margin: 0;
        padding: 0;
        height: 100%;
    }

    img {
        filter: brightness(70%);
    }

    .container-fluid {
        padding: 0;
    }

    .navbar-bg {
        margin-bottom: 0;
    }

    .footer {
        margin-top: 0;
    }

    /* Define a altura máxima do carrossel */
    .carousel {
        max-height: 70vh;
        margin-bottom: 0;
        overflow: hidden;
    }

    .glider-contain {
        position: relative;
        width: 100%;
        margin: auto;
    }

    .glider-prev, .glider-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: #333;
        color: #fff;
        border: none;
        padding: 5px;
        cursor: pointer;
        z-index: 1;
        background: blue; /* Cor das setas de navegação */
    }

    .glider-prev {
        left: 10px;
    }

    .glider-next {
        right: 10px;
    }

    .glider-slide {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .glider-slide img {
        width: 100%;
        height: 100%;
        max-height: 70vh; /* Garantir que a imagem não ultrapasse a altura máxima */
        object-fit: cover; /* Manter a proporção da imagem */
    }

    .carousel-caption {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
        width: 80%;
    }

    .carousel-caption h1, .carousel-caption h2, .carousel-caption h3 {
        font-size: 2em;
        line-height: 1.2;
    }

    @media (min-width: 768px) {
        .carousel-caption h1, .carousel-caption h2, .carousel-caption h3 {
            font-size: 3em;
        }
    }

    @media (min-width: 1200px) {
        .carousel-caption h1, .carousel-caption h2, .carousel-caption h3 {
            font-size: 4em;
        }
    }

    #dots {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        z-index: 1;
    }

    #dots button {
        background: rgba(255, 255, 255, 0.7);
        border: 1px solid #333;
        border-radius: 50%;
        width: 12px;
        height: 12px;
        margin: 0 5px;
        cursor: pointer;
    }

    #dots button.active {
        background: blue; /* Cor azul para o dot ativo */
    }
</style>`

Honestly, i would remove the bottstrap from wherever i could and do it with pure CSS.

I know it sounds crazy, but it will help you a lot in the long term life of your project!

1 Like

I assume your issues have been solved in your other thread now.

1 Like