Two minor issues with portfolio site

1

Hi all, I recently went back and improved my portfolio assignment. I’m almost at a place where I think it’s perfect, just two small issues driving me nuts!

  1. My css animations for the menu disappear after the animation has run it’s course. Right now I have it set as
@keyframes btnHover {
    0% {
        background-color: rgba(240, 240, 240, 1);
    }
    15% {
        background-color: rgba(200, 200, 200, 1);
    }
    100% {
        background-color: rgba(200, 200, 200, 1);
    }
}

With an animation duration of 4s so that the button background changes on a hover. However if they are hovered over for more than 4 seconds the new background color disappears which I don’t want.

The other issue is that my page should be the width of the viewport. For some reason it has created an extra 20px or so of dead space to the right of the page resulting in an unnecessary and unwanted scroll bar. How can I get rid of it?

Codepen here: http://codepen.io/doug20000/pen/ygBEoR?editors=1100

Thanks in advance :slight_smile:

2

Hi for the scrollbar I have not idea.

For your button animation I’m not sure but instead of @keyframes and all I’d give your buttons
a transition: 4s; and your button:hover{ background-color: (whatuwant); and it would work fine.

1 Like
3

Hi,

To avoid unwanted scroll,

Add this in css for html, body

overflow: scroll;
overflow-x:hidden;

it should work for you,
regards,
-rams

1 Like
4

Read here: Redirecting…

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects.

And:

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

1 Like
5

Thank you all for the responses.

@timotheap That worked perfect for my menu animations.

@rams351 @jenovs I had to combine your answers to get the desired effect. I was missing the container-fluid class for my page container. However adding this did not remove the scroll bar. When I incorporated overflow-x:hidden; to the css I got the desired effect.

Appreciate all the input :slight_smile:

1 Like