CODEWITHSUNDEEP
css
Jeff Dowell
Jeff Dowell

Reputation: 125

I can't get my mobile version of site exactly centered

I'm having some odd space issues on the left of my site. For some reason there is slightly more space on the left than on the right in mobile view, thus looking off-centered. I'm guessing its off for desktop view as well, but its not noticeable. I can't figure out what is making it this way. http://jeffreydowellphotography.com/

/* ---------->>> MOBILE gap/space issues <<<-----------*/

@media screen and (max-width: 400px) {

#pageWrapper { margin: 0;}

.sqs-layout .sqs-row .sqs-block:last-child {
     padding-bottom: 0;
     padding-top: 0;
  }}



/* ---------->>> MOBILE center logo <<<-----------*/

@media only screen and (max-width: 400px) {

        h1.logo {
            text-align:center;  
            margin-bottom: 20px !important;
            }}



/* ---------->>> MOBILE logo size <<<-----------*/

@media only screen and (max-width: 400px) {


.logo-image .logo img { 
    max-height: 110px;
    margin: 5px;
    width: auto;
  }

.social-links {
    padding-top: 20px; 
  }}

enter image description here

Upvotes: 1

Views: 144

Answers (1)

Matthew R.
Matthew R.

Reputation: 4350

Try removing the margin: 5px; on .logo-image .logo img in your mobile styles. The image with the margin may be wider than the div that contains the image and it comes off as being non-centered.

UPDATE

I took a look at your site, its actually the margin on the .slide selector. Add this in your mobile styles:

 .slide { margin: 0; }

Upvotes: 4

Related Questions