Hey guys, I just finished my website on my surface pro 4. I started writing the media queries in max-width. I started with mobile first slowly making the screen bigger until I got back up to the size of my surface. The problem however is with a button in the footer -shown here https://imgur.com/a/XuBaPvB The button jolts out to the right. This being caused by my latest media query that’s set to a max-width of 1440px, which doesn’t make sense because when i hover over the body in my dev tools my surface screen width is 1900.5px so it shouldnt be picking up this style. I tried setting a media query at that point to fix it but that didnt work. Any ideas. Thanks:)
You should really just let the social icons and button stay in normal page flow.
You’ve got the button absolute positioned and you have the social icons relative positioned. Relative positioning only moves the element visually while it’s original space is preserved, think of it as leaving a black hole behind where it originally was. Then your using negative margins to drag the button back up.
You could have just removed the default bottom margin (or made it shorter) on your h1 and you would not have needed to do all that dragging.
Take the positioning off the icons and buttons and just let them be inline-blocks if you want them lining up together. That will do away with all the margins changing on your media queries too.
1 Like
alright, Thank you:)
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.