Issues with Responsiveness and Carousel on Mobile Devices

Hello everyone,

I’m experiencing several issues with my website on mobile devices and would appreciate the community’s help in resolving them. Here are the problems I’m facing:

  1. Website not opening on some mobile devices:
  • On some devices, the website doesn’t load at all. On others, it loads but with layout issues.
  1. Carousel on the homepage not showing:
  • On some devices, the carousel on the homepage doesn’t appear.
  1. Extra space after the footer/credits:
  • There’s extra space after the footer on some pages. On others, items like “item 0”, “item 1”, etc., appear.

Been using some AI help to find the solution but cant seem to resolve this issues .

I’m using Bootstrap for the layout and carousel.
I’ve optimized images and minified CSS/JS files.

I appreciate any help or suggestions. Here are some screenshots to better illustrate the issues:

2 Likes

Hi Paga,

Welcome to the forum.

In this instance a link to your site or an example of a page running on something like codepen would be more useful.

Thanks

1 Like

Sure i can post it , here - https://zedacalmacalçadas.pt/index.html

Are you using the correct css and js scripts for bootstrap e.g. same version.

I have just tested with these files

Isolating the code down to just the carousel and it appears to be working

I would make a copy of your index.html e.g. copy to index-test.html and start stripping or commenting out your other scripts and codes.

I see you have scripts for owl-carousel, which don’t appear to be necessary.

If you can remove elements and scripts one by one e.g. comment out lozad, you might be able to isolate the conflict/issue

edit: There does seem to be a bit of ugliness with the image heights at the bottom during transition, someone else here might be able to better advise in that regard.

Yes actually the image heights has been something which i been also to fix. The owl-carrousel was a attempt to fix the issue with the help of Copilot from microsoft

You don’t seem to be using the full bootstrap files. Try the 5.02 version that @rpg_digital pointed out in his post above. It looks like you have a customised version and some of the carousel rules are missing.

2 Likes

It seems to have fix the carrousel issue but still facing that extra space at the end saying item 0 , item 1 and etc on my mobile device and on my friend mobile device the website doesnt even open

Not that this helps, but checking your site on my android mobile I am not seeing the space or list items.

Looking at your source code in inspector there are no list items and looking at your main.js there doesn’t appear to be any code that would generate those list items.

So very odd.

1 Like

The space after the image on the carousel is due to the 6em top margin on the footer and the margin-bottom and padding-bottom on the container.

You can over-ride them like this as long as the code is last in source.

/* Footer styles */
.footer {
    margin-top: 0rem;
}
.container-fluid.carousel{
    padding-bottom:0!important;
    margin-bottom:0!important;
}

Its opening ok on my iphone so maybe you need to clear the cache. (I assume you don’t have JS disabled on those devices.)

You could try fixing these errors though anyway.

https://validator.w3.org/nu/?doc=https%3A%2F%2Fxn--zedacalmacaladas-npb.pt%2Findex.html

I dont mean that one but the ones from my screenshots where it says item 0 , item 1 , item 2 and etc

Also since you can acess the website in mobile , what you think it could be causing the issue in some mobile devices the site cant be open , it just appearing the spinner loading and doesnt move from there

As I said above have you cleared the browser cache on that device?

Also what device and what browsers are you having problems with.

Safari iOS on the iPhone seems fine on both my iPhone except your mobile menu is invisible because you have white text on a white background!

Give it some color.

.navbar .navbar-nav .nav-link{color:#000;}

Also you don’t want that small footer image at 100% on small devices as it looks bad.

You could remove the width100% from this rule.

     @media (max-width: 768px) {
            .footer-item img {
                /* width: 100%; */
                height: auto;
            }
        }

On my case Samsung galaxy S20 Ultra in Chrome and adblock browser the space after footer still appears , but the devices from my friends which cant open the website are a motorola and a aliexpress mobile brand , to know about the models i would have to ask . Tried to clear the cache in my cellphone and the page seems to work without spaces but the navbar appears white with the elements white aswell

I gave you a fix for the white text in my last post :slight_smile:

1 Like

Oh wait thats not what i mean , in the mobile the whole navbar appeared white when the navbar is orange with the white letters

Its the same for the desktop also as you have no background color on that top header. There is white background with white text.

you seem to be missing the style for navbar-bg.

e.g.

<div class="container-fluid navbar-bg">

If you add a background to that style it will show the header.

e.g.

container-fluid.navbar-bg{
  background:orange;/* change to suit*/
}

That color will then also show in the mobile menu when open.

1 Like

I see , thank you , also could you help me figure out why i have to add this directly into css inline on the html instead in my css file which doesnt seem to do anything when i did add this change

When you add it to a css file then you need to ensure that the extra css is at the end of your css files otherwise dues to thee css cascade rules / specificity rules the original rule will over-ride and the navbar will be white again.

Usually you create a custom css file when you use frameworks and that custom css file is always last in source of the css files. In that way you don’t need to change the framework code at all but rather make your changes in the custom css file.

If you did place the css code last in source and it still didn’t work then that would indicate a specificity issue (or a dynamic scripted change). However when testing the code I gave you I simply injected it live into your page at end of source and it worked ok.

As a last resort you can add !important to the rule but that is bad practice as you end up with an unmanageable file. Unless of course you are over-riding some utility classes which are already using !important and then you also need !important.

Become familiar with the devtools in your browser and all the styles will be revealed to you and you can see where they came from. It takes a bit of learning and practice but devtools are the best aid in developing/altering code.

1 Like

It didnt work when i placed the code at last in the CSS file but in the style at the html works perfectly. Could you let me know if in terms of responsive layout on mobile is good now ? I did that footer image you told-me and looks better now but in my cellphone on adblock browser still facing that item 0 , item 1 and etc issue even though i cleared the cache