Page not being mobile responsive- help please

Page not being mobile responsive- help please
0

#1

Please see this link and view on mobile sizes:

There is still a scrollbar where the page can move to the far right so it’s not automatically being adjusted on screen size changes?

I believe this is all you need to add so when on mobile screen you have no left and right scrollbar (missing closing tag so code can show up here):
<meta name=“viewport” content=“width=device-width, initial-scale=1”

Please advise.


#2

Reduce the width of the browser until you see the horizontal scrollbar, then scroll all the way to the right and scroll down. You’ll see that some of your code blocks are overflowing.
You need to either hide the overflow, split the overflowing code line into multiple lines, or add word-wrap.


#3

Thanks for the feedback. I have been trying to make the list items word wrap but hasn’t worked. I tried these on the parent code tag, UL/OL tags, and list tags:
overflow-wrap: break-word;
word-wrap: break-word;

The list items are nested tags so not sure the wrap properties work on these.


#4

@dychin is correct add:
overflow: hidden;
to your body rule in the css, now scrollbars should be zapped.


#6

I think i fixed your word wrap problem I will give you a hint it has to do with the rule you are giving to whitespace in your css

if you are still having problems take the following steps:
change your whitespace rule to
white-space: pre-wrap;
add a line height to adjust, in your case 80%-100% should be fine.
you may have to remove some extra li tags from your html. Let us know if it helps.


#7

Hi kravmaguy,

Thanks. I was knocking down one property at a time too and realized whitespace: pre doesn’t work well with word wrap. I’m surprised you got answers like how they have it on stackoverflow.

Appreciate you diggin’ in!


#8

haha. I probably saw something similar on stacked… :smirk:
let us see a link w finished product when your done with it. Its looking good. Nice


#9

Didn’t know this project was harder than it looks lol. I guess trying to do word wrap, whitespace, and line height for list items isn’t as straightforward as 1 + 1. This is when the gif of the Family Guy trying to fix the blinds come in lol.

What I have now: https://codepen.io/rrogerthat/full/VVrbPo/
The line height and word wrap still isn’t perfect as you can see when a comment is word-wrapped, each line isn’t lined up from the left due to the first line having whitespace. Solving that dynamically sounds like a challenge.


#10

I checked out your pen again. professional through and through… I am impressed with the skills and creativity. U are the man.