Horizontal scroll issue on mobile view

[anon99097377]

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

Tribute Page certificate here:
[LINK REMOVED]

Codepen:
[LINK REMOVED]

Thanks!

[bbsmooth]

Your codepen link isn’t working for me.

[anon99097377]

Hey there, the link is working now

[mjoshu4]

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!

[anon99097377]

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

[mjoshu4]

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.

[anon99097377]

Thanks mjoshu4

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

Tribute Page certificate can be seen here:
[LINK REMOVED]