[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 405
  • Last Modified:

bootstrap - move text over on portrait mobile device

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
nsitedesigns
Asked:
nsitedesigns
  • 6
  • 6
1 Solution
 
GaryCommented:
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
 
GaryCommented:
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
 
nsitedesignsAuthor Commented:
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
GaryCommented:
No, not necessary, but see my comment just above, in case you missed it.
0
 
nsitedesignsAuthor Commented:
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
 
GaryCommented:
See above, it they click Tap here nothing happens ;o)
0
 
nsitedesignsAuthor Commented:
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
 
GaryCommented:
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
 
nsitedesignsAuthor Commented:
great - another item done!
0
 
nsitedesignsAuthor Commented:
Cathal,

You seem to know bootstrap forwards and backwards.  Is there a site you can recommend I go to so I can learn?
0
 
GaryCommented:
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
 
nsitedesignsAuthor Commented:
ok - thanks for the advice.  : )
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now