Small Mobile Issue

HTML & CSS
1

Check out the issue here: http://mobiletest.me/htc_one_emulator/?u=http://keepercircle.com/blog/

I am trying to add a margin on the right of the “We Have a Winner” Banner so that it’s the same as left side.

<article id="post-1496" class="post-1496">
  <h2 class="post-title"><a href="http://keepercircle.com/we-have-a-winner/" rel="bookmark">We Have A Winner</a></h2>
</article>

CSS:

.post-title {
  position: absolute;
  bottom: 0px;
  width: 100%;
  text-align: center;
  z-index: 100;
  display: block;
  margin: 0px 0px 15px;
  background-color: black;
}

How can I add equivalent margins on mobile for this h2 banner?

2

How about removing the margin/width on that, and instead just putting left:10px and right:10px? That’ll ensure there is 10px left and right space :slight_smile: .

3

So if you check out the site on mobile: http://mobiletest.me/htc_one_emulator/?u=http://keepercircle.com/blog/ then you can see for some reason there’s still more space on the left than on the right.

It looks like my container is not containing the inner elements, they’re spilling over the right side… How can I keep them in the container div?

4

Well for one, “#htc_one_emulator” has a fixed width of 599px on it. For a responsive website, generally fixed widths are bad :slight_smile: .

Perhaps change that to max-width and allow it to scale down? I mean a phone will look odd squished so I’m not sure how you want to handle that wide phone on smaller screens.

5

That usually suggests a math error.

I believe these paddings are contributing to the problem.

.container {    
    margin-left: auto;    
    margin-right: auto;    
    padding-left: 15px;    /* delete me */
    padding-right: 15px;    /* delete me */
}

Perhaps they should be negated by a media query.

Back to Ryan. I’m not really following the page very well.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.