Mobile blog

Did not help. It’s either the gap next to the column that shows up, or the gap next to the footer. When I try fixing one, the other happens. I don’t get this at all. Both appearing at the right side.

Here’s the updated screen shot after doing the above changes mentioned earlier.

What device are you using? I can’t reproduce that issue.

Edit:

More to the point, what code are you using? I’d assumed you had updated your live site, but clearly not. As we have said countless times before, if you want others to help, you need to provide the code to let us reproduce the issue.

@TechnoBear it’s a Motorola z2 Play using Firefox version 87.0.0-rc.1. What do you mean what code? I’m on my blog live site HTML, CSS. I have given you the code in previous mentions. What specific code are you looking for?

On your live site I’m still seeing a width of 80em for footer.

Ok, yes. It’s what I put after you said that I don’t need both max-width and width.

But at no point did I tell you to change the width from 1280px.

No, you didn’t. The 80em I have is = 1280px, so nothing really changed.

You seem to have missed or misread Paul’s post:

And if I have my font size set differently to yours, what then?

And if I have my font size set differently to yours, what then?

I don’t know about that…

I now have :

.main-footer {/*new changes */
  max-width:80em;
  border: 0px solid lime;
  background: black;
  box-shadow: none;
  margin: auto;
  margin-top:4px;
  padding: 60px;
}


.mywrapper {
  max-width: 80em;
  margin: auto;
}

Should be a match now.

No change it seems…

If I’m looking at the right page it looks like this to me in Chrome.

1 Like

@PaulOB nice. If that’s mobile view then it must be a browser compat thing. Different browsers show differently. Otherwise, I have the same exact view on desktop, not mobile.

No that’s a desktop view in Chrome. It has 3 columns like the image you showed.

You go to one column around 800px but from 1280px down to 800px you don’t do anything and the layout is too wide as you can see by the horizontal scrollbar. Any tablets at 800px will have a big gap at the side due to the sideways scroll.

At 800px you go to one column and it gets a little better but you still have content wider than the screen. As you get below 500px it gets worse and content pushes out to the side making the blog text smaller giving that gap at the side.

You are overflowing content on many items because you still use the wrong sort of positioning. For example this element.

.debilevsy {
    position: relative;
    top: -1018px;
    left: 270px;
    width: 30px;
    height: 30px;
    border: 0px solid red;
    background: none;
}

You have once again wrongly used relative positioning despite me telling you never to use it again until you know what you are doing ;). You have shifted it left by 270px and it is 30px wide and the element is already at the right edge so now you have created a horizontal scroll of around 270px. On mobile this will have the effect of shortening all the other content and creating a gap at the side.

You make similar mistakes with your #clocktitle and your nav is also too big to fit on smaller screens. Some of your figure element are also wider than any mobile screens as you have given them fixed widths.

You cannot have any element that overflow your fluid width containers. If at any stage you have a horizontal scrollbar on the viewport then that will break mobile screens as they effectively squash the other content as can be seen by the blog getting narrower and narrower.

Go through every element on your page and make it fit at every pixel. If something sticks out then you are doing it wrong so go back and fix it. A quick fix in some cases would be to apply overflow:hidden to a parent but that’s a hack when the element shouldn’t be sticking out in the first place.:slight_smile:

2 Likes

The clock and nav look fine on mobile. At least, to me… It seems it’s the follower icons as you mentioned that is the problem, so I can remove the position:relative on that, but I see everything else looks fine. Another problem is that my blog zooms in by default when I use Firefox’s Desktop site option.

Otherwise, I don’t see where and what I need to adjust…

layout is too wide as you can see by the horizontal scrollbar.

I don’t see any scrollbar.

Here it is all the way from 1280px and downwards. This is on a mac so scrollbars only show on hover but you can see them in the screenshot at the bottom.

Then on small screen that same scrollbar has the effect of squashing the content. the gap down the right side is caused by the overflowing content.

I haven’t tested mobile as such because you seem to be displaying a different page on mobile.

Don’t use relative positioning; use something more appropriate.

They look ok but the items I mentioned stick out of the containers. They are the elements causing a horizontal scrollbar The parts that stick out are mostly not visible but have an effect. Just highlight them with your devtools and you see their outline goes way beyond the screen. If you have a 300px width item sitting at the right edge of the window then there is 270px of it outside the viewport. Just because the content of that item is only around 30px the whole item was 300px and you shifted it left by 270px width relative positioning meaning it needs 270px + 300px space to live in. That’s why it causes a scrollbar and the other issues I pointed out.

It’s not the first time we’ve had this conversation so I will leave this with you for now until you have an eureka moment. :slight_smile:

2 Likes

Sigh, I hope I will have that eureka moment soon. I’m just so frustrated with all this. But am happy that we have changed the overall layout to 3 column. I mean that’s just awesome.

I have a lot to learn :slight_smile: . So don’t use relative positioning, use something else… well I can think of transform: translate (x), (y)… as one. Margin-left, margin-right as another.

I see my mistake on the #clocktitle. It should be absolute positioning, because it goes on top, as you said absolute positioning is for elements that you want to place on top, such as the speech bubble.