@media query for horizontal scrolling section

I am struggling with this last part of the narrow view of my portfolio website. If you drag the screen horizontally to the most narrow view then you will see what I am talking about. I want the skills section to show both arrows and two icons, but for the narrow view, everything is being pushed off the screen. I have played around with @media query, but nothing is working for me. Does anyone know the simplest way to go about achieving this?

Don’t hide the overflow when you are developing. You have to see it. Remove the overflow: hidden from body and pay attention to what is overflowing and why.

There is no reason to use position: absolute on .Skills removing that will at least let the overflow-x: scroll work as intended. You will still have to scale down the size of the icons or you might stack it vertically at some point.

I wouldn’t remove the arrows as they are part of the component functionality.

You can use a mix of viewport units and math functions to control them to have both the size and spacing adjust automatically.

For example, if you use a clamp function for the icon font-size they will scale down automatically.

font-size: clamp(1rem, 4vw + 1rem, 70px);


I can’t get it to work like the visual above. It works exactly like that until it reaches a certain point that is too narrow, then the icons don’t appear at all. Is there a way to fix this?

Did you change the width for the icons to use a viewport unit as well?

I can’t remember the exact changes I made. I did them in the browser.

I would suggest you push your changes to the repo and post a link to it.

Change min-width to width in the .Skills i selector. That should let you use a viewport unit.

.Skills {
  background-color: #1c232e;
  margin: 0;
  padding: 4rem 2rem;
  text-align: center;
  font-size: clamp(1rem, 4vw + 1rem, 70px);
  position: relative;
  z-index: 50;
  width: 100%;

#backBtn, #nextBtn {
  width: 8vw;
  cursor: pointer;
  margin: 40px;
  color: #373d47;
  font-size: 50px;

.Skills i {
  width: 8vw;
  font-size: auto;

I was using the min-width to control the spacing between the icons. It allowed me to only show 4 icons on the full screen view. Now on full screen, all six icons show. I’m trying to use both min-width and width now. Trying to find a way around this

I guess I read that backward. Isn’t the code doing that now? Other than some minor adjustments as needed.

I will say if you want a scroll overflow to hide part of the content it should not hide it completely. It should show part of the content to let the user know there is more content. So it should show 4 and a half icons.

The adjustments you made work well. The only problem is that the full screen shows all six icons and I think it is weird to have arrows for the full screen view when they would go to nothing. If that makes sense? Once I figure out how to only show 4 and a half full screen, then everything will be fine. Is there a way I can do this without using min-width?

Codepen shows my welcome-section differently so ignore that. But the skills section is the same. All six icons showing full screen. Everything shrinks well, it’s responsive, but I need to show 4 1/2 icons in full screen instead of all 6.

It doesn’t personally bother me that the arrows are visible even when there is no overflow of them to scroll.

You can adjust the width on .gallery and/or make the content and the spacing larger. The size of the content and any spacing between the content is directly related to how much width is needed (or not needed) for the overflow to kick in.

You’re right, it looks fine the way it is. Just need to use @media to adjust the text size as it shrinks. Thanks for all your help!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.