0

I'm setting up my new website's CSS file for mobile browsers. One problem: The text is displaying vertically in the second (i.e. bottom for my mobile layout) column. In other words, instead of displaying "Hi, Stack Overflow!" my browser would display the following: 

H
i
,

S
t
a
c
k

O
v
e
r
f
l
o
w
!

I have tried many CSS properties, but to no avail. I am using Safari on an iOS device.

Edit: I believe this is the relevant code

#container {
width: 100%;
background-color: #FFF;
}

#navigation {
display: block;
float: none;
width: 100%;
background-color: #009245;
}

#content {
display: block;
float: none;
width: 100%;
}

Edit 2: Here is the HTML code

<body>
<div id="container">
<div id="navigation" class="navigationtext">
<h2><a href="">domain</a><br>
the home page of Firstname Lastname</h2>
<p><a href="/about/">About</a></p>
<p><a href="/blog/">Blog</a></p>
<p><a href="/contact/">Contact</a></p>
<div class="copyright">Copyright</div>
</div>
<div id="content">
<h1>Welcome!</h1>
<p>The page's content or text.</p>
</div>
</div>
</body>
N. Scribner
  • 43
  • 1
  • 8
  • Post the code please. *"Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a [mcve]."* – Michael Coker Jul 18 '17 at 00:14
  • Thanks for the information (I'm new). My question has been edited to show what I believe is the relevant CSS code. – N. Scribner Jul 18 '17 at 00:43
  • try to set `max-width: 100%` and `width: 100px` I mean, any amount in px. Maybe your container too small to fit all the words horizontally. But anyway, can you share your HTML too? CSS is not enough to fix your problem. – Walt Jul 18 '17 at 00:49
  • Thanks so much, Walt! Update: Setting both the width and max-width of the second column (i.e. #content) made the text display horizontally and take up 100% of the width. I just have one issue: Now the height of #navigation is 100% for some reason. Do you know how to fix that? – N. Scribner Jul 18 '17 at 01:31
  • I fixed it. I set #navigation's height to auto. I also deleted "float: none" from #navigation and #content. Someone online recommended doing that. Does anyone know if it does anything? – N. Scribner Jul 18 '17 at 01:35

0 Answers0