Horizontal scroll issue on mobile view

Hey Guys,

I’m on my iPhone and I’m looking at the preview of my freeCodeCamp Tribute page certificate (see image). The preview is currently allowing me to scroll horizontally which I do not want.

I’ve made the body background-color:yellow; to highlight the issue.

Also, I’ve tried to troubleshoot this issue by using :

* {
outline:1px  solid red;
}

but I couldn’t figure out how to stop this horizontal scrolling.

If you have any ideas how to fix this let me know :slight_smile:

Tribute Page certificate here:

Codepen:

Thanks!

Your codepen link isn’t working for me.

1 Like

Hey there, the link is working now

Hi maybe you can make the width less more on your .merch class

.merch {
    height: 18rem;
    width: 6rem;
    text-align: center;
    display: flex;
    flex-direction: column-reverse;
}

Hope this help!

Thanks mjoshu4

Unfortunately this didn’t work.

I’ve also tried using different units like % / vw / vh for the .merch class but it still didn’t fix the issue

Hi Smgy94

After you saved the changes, hit ctrl+f5 for hard refresh and see if the issue is fixed.

the over gap is gone on my viewing.

1 Like

Thanks mjoshu4

But i’m still getting the issue on mobile even after clearing my cache

Tribute Page certificate can be seen here: