Thank you for being a valued part of the CNET community. As of December 1, 2020, the forums are in read-only format. In early 2021, CNET Forums will no longer be available. We are grateful for the participation and advice you have provided to one another over the years.

Thanks,

CNET Support

Resolved Question

positioning text elements for mobile version website

Apr 2, 2014 4:07AM PDT

I'm TOTALLY NEW to coding for small screen (iOS mobile devices). I need help ASAP please.
I have problem getting the text elements in correct position in the small screen version of my site.

Questions about css coding:
1.
In upperright corner of my website:
• Contact Us
• Directions
stays on the far right of screen. They won't move. I'd like them to move and center under the FFS logo/address and quote "Celebrating over 180...".

2. and regarding the QUOTE with line above it: "Celebrating over 180..." I'm having problem with its line-height (when it breaks into 2 lines) . It's also running into other elements!
3.
regarding the columns that are now vertical:
why do the 1st 2 columns fill the width of screen but the 3rd column has smaller width?

Please help ASAP! My client is starting to ask questions!! I'm running out of time trying to figure out a lot of stuff on my own.

here is link to my site:
http://www.frankfordfriendsschool.org/CLASSexample3.html

style sheet for small screen:
http://www.frankfordfriendsschool.org/class-smallscreen3.css

if you need this, the regular screen stylesheet:
http://www.frankfordfriendsschool.org/class2.css


and BELOW IS THE CODING for html file:

<html>
</body>
<div id="wrapper">
<header>
<a href="index.html"><img src="/images2014/FFSlogo-address.jpg" alt="Frankford Friends School, 1500 Orthodox Street, Philadelphia, PA" /></a>
<span class="upperright">
#

#


<span class="quote"> Celebrating over 180 Years of Quality, Affordable Quaker Education
</header>

<nav>
Nav links here
</nav>

<!-- Code for a three-column layout under nav bar -->
<div class="columns">

<aside class="left">
Left column
2nd line
3RD LINE
</aside>

<!-- Article is the main content of the page -->
<article>
Main content column
xyz
3rd and 4th line is next
5th line... I dont think so
not 6 either
</article>

<aside class="right">
Right column
wxyzabcd
</aside>
<!-- End columns -->

<!-- Footer at bottom of page (optional) -->
<footer>
Footer content here
</footer>
</div><!-- End wrapper -->

</body>
</html>

Discussion is locked

tishbk has chosen the best answer to their question. View answer

Best Answer

- Collapse -
In short, start learning RWD.
Apr 2, 2014 4:11AM PDT
- Collapse -
thanksfor suggestion
Apr 2, 2014 4:13AM PDT

I was going to ask if there's a tutorial site for mobile site coding. Thanks!

I learned a little bit about RWD in a course i took recently. But there wasn't much info. provided!

- Collapse -
It's like a sip from the fire hose.
Apr 2, 2014 4:17AM PDT

There's a lot on the web about RWD but I find folk need to tackle it slowly. Well, I mean no one I know can implement this by say, lunch time. The quick exit I find is when the web master makes a second site for mobile until they have time for a full on RWD site.
Bob

- Collapse -
PS. And when you test.
Apr 2, 2014 4:44AM PDT

For now try a phone's stock browser. Why? While my phone has Chrome, Firefox and it's stock browser my bet is that 99% of the phones have whatever browser is stock.
Bob

- Collapse -
Answer
Responsive Frameworks
Apr 2, 2014 5:24AM PDT

If you're going down the responsive route, which I do recommend, I would also encourage you to take a look at frameworks like Foundation or Bootstrap. Much of the responsive aspect, such as layouts, fonts, menus, etc, have already been solved, so this should help you build responsive pages.

~Sovereign

- Collapse -
phone stock browser?
Apr 2, 2014 6:23AM PDT

Where would I find a phone stock browser? I guess that means it will show me how the mobile-device website looks?
I was going to ask if there is such a thing. That would be great.

- Collapse -
Where it is.
Apr 2, 2014 6:26AM PDT

To find it, pick up the smart phone and reset it to it's factory condition. Then the browser on the phone would be the stock browser.

Before we continue on, maybe you don't own a mobile device? Once in a while I encounter a developer that has no target device and well, they are at a severe disadvantage.
Bob

- Collapse -
only iPod touch
Apr 2, 2014 7:23AM PDT

I'm one of the few who doesn't have a smartphone! Too cheap to buy a plan for it.

I only have a iPod touch that is about 2 or 3 years old!

So you don't know of any simulator online?

I've been narrowing my browser window so the mobile css will kick in.

- Collapse -
Take a look at the
Apr 2, 2014 8:07AM PDT

iOS SDK and the Android SDK to simulate iOS and Android phones/tablets. Setting up the Android SDK should be pretty straight forward, and from what I saw online, the iOS SDK can also work on Windows, but may be a little trickier.

You can do the bulk of your development using simulators to test, however, at some point you'll want to use real devices to test, just to make sure you didn't miss anything.

~Sovereign

- Collapse -
Chrome emulates many devices. Who knew? (link!)
Apr 2, 2014 11:20AM PDT
- Collapse -
thanks!!
Apr 3, 2014 12:59PM PDT

That is a great find!
many thanks!

I tried to do a thumbs up on your post but the icon disappeared when I clicked on it! This computer is driving me nuts. Reloading a web page is molasses slow tonight. Sad That's in Safari and Mozilla browsers. Chrome has been achingly slow for awhile so haven't opened it.

- Collapse -
Thanks for asking.
Apr 3, 2014 3:45PM PDT

I didn't notice this feature until you asked! I've been doing this the classic way. Get devices to test with!
Thanks for asking.

- Collapse -
another simulator site
Apr 5, 2014 8:28AM PDT
- Collapse -
another simulator?
Apr 5, 2014 8:31AM PDT
- Collapse -
For now, the office will continue on the current system.
Apr 5, 2014 8:37AM PDT

Good luck,