0

I just created a blog and everything looks perfect on the computer, but when I visit the mobile site:

  1. the header and footer is not centered
  2. on my about page on the mobile site, the photo overflows the post width (even though on desktop it does not).

Please help, I can't figure out the problem! For my first problem (header and footer not centered on mobile) I have tried making the margin "0 auto" and it did not work, and for the second problem (photo overflows on mobile). I have already tried max-width for the image and it did not work.

I know some code (I took a class on HTML and CSS), but I have no experience with mobile websites so I would appreciate any help!

Here is a link to my website: http://apaperescape.tumblr.com/

Also, I'm not sure what code I needed to provide, so just let me know!

Alexei - check Codidact
  • 22,016
  • 16
  • 145
  • 164
Christine
  • 3
  • 2

1 Answers1

0

You have multiple problems here. At least for me, your header and footer are centered perfectly in mobile debugging mode. That said, there are a couple problems here:

  1. You need to set your content width to less than 100% if you want to center it. Or you can use margin:auto to center it, too.

  2. Your images need to be set to be a certain percentage of the page, too. For instance, you could write a div for images, set it to be width:80vw, and then display images as:

    background:url("imagehere");
background-size:contain;

Alternatively, you could just set your width and height to vh or vw percentages, providing all pictures are the same aspect ratio.

You can also just set your image to 100%, and let the parent div to the scaling. Here are some other methods: Contain an image within a div?

  1. You have excess padding-left for the page, which is 1em. You also have excess padding for the content div, which is 50px. This is causing the contents to spill over. It's odd, but padding breaks outside of the 100% rule and can push it to 120%, etc. Cut the padding out, scale down your content divider, and then use margin:auto to center it. It will display cross-platform MUCH better that way.
Community
  • 1
  • 1
Justin C
  • 326
  • 2
  • 13