Image stops centering on mobile ignores all styles to fix

Code Feedback
1

Seeking once again some help for my stack overflow question. Everyone here has been so amazing and I am hoping that someone if having a spare moment can help me figure out why on earth my image stops centering at 642px screen size. I have no media queries at this size and I cant find any conflicting styles that would cause this behavior. Any help greatly appreciated,thank you.
[http://stackoverflow.com/questions/39560906/image-stops-centering-on-mobile]

2

Hi,

have you got a link… it could be anything

3

Mark,

I sure do sorry I thought it was attached I was confused by the link limit this forum has. The site is http://www.goodedevelopment.com/

4

Are you talking about your picture on the portfolio? If so. Then i must suggest you to use rows and columns of bootstrap as you are already using it on other elements why not these elements as well.

5

hi,

Honestly, and I’m not all that experienced, but looking at your site in dev tools I think you’re going to have a hell of a job fixing that. You’re using break points every 50/100px or so with different positioning at each one. This is why nothing seems to work because there’s always something lower down the css to override it, depending on which screen size you’re on.

I would recommend you either look at bootstrap or flexbox if you haven’t already, it will make your life much easier.

Bootstrap is probably your quickest route, but the most scaleable and better in the long run is flexbox.

here’s a quick intro to my favourite layout technique FlexBox. You’re already using media queries so flex box will fit right in with that knowledge.

@media screen and (max-width: 767px)
#pic {
    overflow: auto;
    margin: auto;
    position: absolute;
    left: 0;
    bottom: 157px;
    right: 0;
}

@media screen and (max-width: 825px)
#pic {
    width: 119%;
    height: auto;
    position: relative;
    right: -209px;
    top: 229px;
}
@media screen and (max-width: 965px)
#pic {
    width: 130%;
    height: auto;
    position: relative;
    right: -222px;
    top: 264px;
}
@media screen and (max-width: 1040px)
#pic {
    width: 133%;
    height: auto;
    position: relative;
    right: -280px;
    top: 231px;
}
@media screen and (max-width: 1100px)
#pic {
    height: 315%;
    width: auto;
    position: relative;
    right: 400px;
    top: 6px;
}
@media screen and (max-width: 1199px)
#pic {
    width: auto;
    height: 388%;
    position: relative;
    right: 446px;
}
1 Like