Strange responsive issue. Please help :)

HTML & CSS
1

Hi Sitepoint,

i have a strange issue. I have recently started learning more about responsive design, and just finished designing a responsive banner.

The problem is that if I resize the screen the ’ Get started’ button in the banner does not move. When you refresh the page, it changes location then. So if you are on your phone and switch from portrait to landscape, everything move bar the button. Same if you resize the browser.

Here is the site: Any help would be very helpful! http://platformb.net/everskill/

Thanks in advance.

Please don’t pick on my responsive skills! I’m just learning.

2

Tough I know! It’s doing my head in.

Anyone?

3

I’ve moved this to the CSS forum, as it’s really a standard CSS/layout issue. The button is misaligned on desktop as well if you resize the browser window. Is there are reason why you’ve chosen position: absolute for this? It would be safer to let the button sit in the flow of the document along with the other elements.

4

Thanks. The reason it’s uses absolute positioning is because the slider I used has all the slider elements set to that.

Anyone have any idea about the button?

5

None of the elements around that button (such as the text) are set to position: absolute, and that’s why they do the right thing and the button doesn’t. Just do the same for the button as you’ve done with the other elements—as I said, let it follow the natural flow of the elements.