Embla-carousel: Carousel isn't mobile-friendly

[aarjav24]

I used the code that's given in this and modified it to my liking, only to realise that the carousel isn't mobile friendly anymore. The rest of the webpage works perfectly on mobile without the carousel. The carousel seems to ruin the structure of the webpage. How can I fix this @davidcetinkaya?

Edit: Added a hyperlink to the code sandbox.

[davidcetinkaya]

Hi @aarjav24,

What do you mean by not mobile friendly? And what do you mean by ruin the webpage structure?

David

[aarjav24]

Thanks for the response David!
When viewing the carousel on mobile, I can only see the left side of it. The entire carousel doesn't fit on the screen, and zooming out makes the rest of the text way smaller.
P.S. I'm a beginner web developer so pardon me if I'm asking a very novice question.

[davidcetinkaya]

Thanks for explaining further. This doesn't seem to be an issue with Embla Carousel. It sounds like you have a CSS issue somewhere. I can't help you if I don't see your code.

[aarjav24]

@media screen and (max-width: 801px) {
    h1.mob {
      font-size: 9vw;
    }
    p.mob {
        font-size: 4.2vw;
    }
  }
@media screen and (min-width: 380px) {
    img.mob1 {
        height: 250px;
    }
}
@media screen and (min-width: 750px) and (max-width: 1025px){
    h1.mob {
        font-size: 6vw;
    }
    p.mob {
        font-size: 2.8vw;
    }
  }
@media screen and (min-width: 1026px){
    h1.mob {
        font-size: 2.6vw;
    }
    p.mob {
        font-size: 1.15vw;
    }
  }

Does this help in any way? I have a header above a h1 and paragraph, with the carousel below it, followed by a footer. I don't think it'd be feasible for me to share those here.

[davidcetinkaya]

Sorry, that doesn't help. Do you have a header or any text that is horizontally overflowing on your page (meaning that it's wider than your mobile screen so you have to scroll)?

[aarjav24]

Is it an issue if the image is too big and when viewed on mobile it tends to stay the same size, hence forcing the user to zoom out? How can I scale it down, if that is an issue?

Sorry, that doesn't help. Do you have a header or any text that is horizontally overflowing on your page (meaning that it's wider than your mobile screen so you have to scroll)?

When I use the carousel, all the text seems to overflow past the screen, unlike without it, when the text shows up perfectly.

[davidcetinkaya]

Sorry, I can't find the issue if I don't have your setup. I suggest that you create a CodeSandbox and choose the static setup like so:

Recreate your setup with all your HTML, CSS and JS, and share the link here if you want me to look into it. I'm pretty sure that this isn't an issue related to Embla Carousel.

[aarjav24]

I tried only using the carousel and nothing else on the page. It works fine then. I guess it's in issue in the rest of the code. I'll look for a solution. Thanks @davidcetinkaya for your time. If you've any thoughts on this, let me know.

Recreate your setup with all your HTML, CSS and JS, and share the link here if you want me to look into it. I'm pretty sure that this isn't an issue related to Embla Carousel.

Will do that and revert soon. Thanks!

[davidcetinkaya]

I tried only using the carousel and nothing else on the page. It works fine then.

As I suspected, this is most likely related to an element somewhere on the page that's overflowing horizontally. This will render the whole webpage wider than your mobile screen.

Try removing one element at a time and you'll know what element is causing this when the page fits on your mobile screen.