Solved

bootstrap - move text over on portrait mobile device

Posted on 2014-02-21
12
379 Views
Last Modified: 2014-02-26
How do I move "TAP to Call...." which appears at the bottom of the screen on a mobile device over to the right more but only when viewing portrait orientation?  It looks fine in landscape on a phone.  

Link
http://nsitedesigns.com/nsitedesigns/wiplastic_scott/index.html

Screen shot
http://screencast.com/t/Qbp12uX5Lug
0
Comment
Question by:nsitedesigns
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
12 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39878190
I'd remove this
img.phone_icon {
    padding-right: 30px;
}


Add this
. clickphone {
min-width:120px
}


And change your tap to call div to 7 cols
<div class="col-xs-7 clicktocall">
0
 
LVL 58

Expert Comment

by:Gary
ID: 39878204
I would probably add text-align: right; to the .clickphone class above as well to main a consistent space between the phone and text
Or better still just put the phone and text in one div with the anchor - doesn't make sense to say Tap here and then they have to tap the phone...
0
 

Author Comment

by:nsitedesigns
ID: 39878208
would i also need to change the <div class="col-xs-4 clickphone"> to <div class="col-xs-5 clickphone">  so the "7" and the "5" equal 12?
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 58

Expert Comment

by:Gary
ID: 39878215
No, not necessary, but see my comment just above, in case you missed it.
0
 

Author Comment

by:nsitedesigns
ID: 39878217
also, do you think it is confusing on the "tap to call" to have the phone icon there.  If they tap the phone, nothing happens.  we put it there to draw attention to the tap to call feature.  thoughts?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39878228
See above, it they click Tap here nothing happens ;o)
0
 

Author Comment

by:nsitedesigns
ID: 39878237
if you hit the phone number itself (which is pretty small), it auto dials.  maybe i should just have the phone number in big numbers?

p.s.  isn't the grid about everything adding up to 12.  don't get why i don't have to change the
<div class="col-xs-4 clickphone"> to <div class="col-xs-5 clickphone">  so the "7" and the "5" equal 12?
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39878253
Doesn't need to add upto 12 but musn't exceed 12.

I would move the phone and text into one div with the anchor around them both.  Forget about separating them in columns and you're done.
0
 

Author Closing Comment

by:nsitedesigns
ID: 39878281
great - another item done!
0
 

Author Comment

by:nsitedesigns
ID: 39887372
Cathal,

You seem to know bootstrap forwards and backwards.  Is there a site you can recommend I go to so I can learn?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39887388
Don't know, I've only ever referenced http://getbootstrap.com/ for the correct classes to use.

I would say spend a day getting your head around how the grid system works - this is the core of Bootstrap and what it really is all about - everything else is just icing. I don't bother going out of my way to remember all the different button classes for example.

Play around with the sizing at different screens size, learn the difference between what lg, md, sm and xs is - commit this to memory and you know Bootstrap.
Then when you need a bit of extra styling just check the site for it.

You can search online for tutorials but a lot of them are for Bootstrap 2 which means they are no use since the CSS changed a lot in v3.
0
 

Author Comment

by:nsitedesigns
ID: 39888758
ok - thanks for the advice.  : )
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Node.js 11 82
fillable forms on website 2 44
Wordpress Responsive Web design and iPads 11 40
Firefox CSS Help. 1 12
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

751 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question