CSS question

Here is my site: http://goo.gl/HwFhg7

on mobile view, I am trying to center that search box (search box), but am having a heck of a time getting it done. Any help is appreciated.
search.png
lvollmerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

sajayj2009Commented:
.pull-right {
  display: inline-block;
  /* float: right !important; */
}

@media only screen and (max-width: 767px)
.navbar.navbar-inverse .nav-bar-top .ads-banner-main {
  margin-top: 0px;
  text-align: center;
}

Open in new window


Hope you would have solved it. But in case!
0
Julian HansenCommented:
First Remove the pull-right from your form.
From
<form class="form-search pull-right">

Open in new window

To
<form class="form-search">

Open in new window

Secondly change your style on line 150 of styles.css
From
.navbar.navbar-inverse .nav-bar-top .ads-banner-main .stylish-input-group {
  margin-top: 24px;
  max-width: 260px;
}

Open in new window

To
.navbar.navbar-inverse .nav-bar-top .ads-banner-main .stylish-input-group {
  margin: 24px auto 0 auto;
  max-width: 260px;
}

Open in new window

Note the changing of the margin-top to margin and the auto for left and right
0
lvollmerAuthor Commented:
both solutions work. THanks.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Julian HansenCommented:
Just a note on the accepted solution

the pull-right style's sole reason for existing is to float an element right - it is one of the base Bootstrap styles - changing it to not float right and do a display: inline-block - makes absolutely no sense whatsoever

Firstly, it is potentially undermining your entire site that might have other aspects that rely on the default functionality of pull-right
Secondly, it is a solution based on changing the functionality of a class - where the same effect can be achieved by simply removing the class
Third, if / when you update your bootstrap.css file (and I would consider using a CDN for the CSS and JS files anyway) you loose the changes.

Bottom line you should never change the contents of the bootstrap.css file - rather override through a custom.css file.

Don't override single function styles - just don't apply them to elements you don't want to have that style.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I agree with Julian, while both answers 'work' there are always multiple ways to get to the same visual thing you are trying to achieve.  However, not all answers that 'work' are acceptable.  In this case, the accepted answer 41275285 should not be done because it is over-riding a bootsrap.css class.  

Julian's answer should be the only accepted answer.
0
lvollmerAuthor Commented:
After reading through the comments, I agree. How do we resolve this?
0
lvollmerAuthor Commented:
Thank you
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.