html - How can I center my login/inquire buttons when on mobile displays? -


i working on responsive website

link

that changes header when goes below 450 pixels. going except need inquire , log in buttons center when below 450 pixels.

screenshot of buttons reference

buttons highlighted in yellow

i tried 

margin-left:auto; margin-right:auto;

and

text-align:center;

this didn't work. instead, gave both icons a

margin-left: 40px;

this worked, on android phones. on iphones, broke 2 lines.

i don't have screenshot of can see effect

here

here

css

#headericons img{    float:right;    margin-top:30px;    margin-right:10px; }  /*float icons right on medium sized screens*/ @media , (min-width: 628px) , (max-width: 989px){     #headericons img{         display:block;         float:right;         margin-left:15px;         margin-top:10px;     } }   /*float left again tablets*/ @media , (min-width: 451px) , (max-width: 627px){     #headericons img{         display:block;         float:left;         margin-left:3px;         margin-top:10px;     } }   /*center phones*/ @media , (min-width: 0px) , (max-width: 450px){     #headericons img{         display:block;         float:left;         margin-top:10px;         margin-left:40px;     } }

and here html

<div class="d10-d12 m-1" id="headericons">     <img id="loginicon" src="images/new_logoin_vi.jpg" width="116" height="37">     <img id="inquireicon" src="images/new_inquire_button_vi.jpg" width="116" height="37" >             </div>

try using display: inline-block & removing float; should able use text-align: center; or margin: auto; on containing div.


Comments

Post a Comment

Popular posts from this blog

user interface - How to replace the Python logo in a Tkinter-based Python GUI app? -

is there way change default logo, python logo , appears in window's task bar? notice have replaced default tk logo used appear in application window. i using windows 7 , python 2.6 , developing gui of tkinter. you can using winico tk extension package. winico package can used add system tray icons tk programs. the following sample shows 1 way change runtime application icon. note need provide .ico file suitable sizes of icons in on command line , need use pythonw. not change taskbar icon console when running python script. test extracted winico0.6 package python\tcl\winico0.6 folder package require winico work , ran code below using pythonw winico_test.py path\to\some\ico\file.ico . import sys tkinter import * def main(argv): root = tk() root.update() root.tk.call('package','require','winico') id = root.tk.call('winico','createfrom',argv[1]) root.tk.call('winico','setwindow',root,id...
Read more

netbeans - Remove indent guide lines -

Image
netbeans 8 default shows indent guide lines (light gray dotted vertical lines). how can turn feature off? this can turned off in menu: view > show indent guide lines. more configuring indent lines in release notes . release notes the guide lines dotted lines drawn every tab size before character on line. shown default. can turn off feature in menu view-show indent guide lines. change line's color go options-font&colors-highlighting-indent guide lines.
Read more

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

i using signpost oauth access data magento server. have read various tutorials on same , reach point open browser user can enter credentials. however, per requirement have automate part. hence, user should not browser page. have set-up done on server side ( magento ), hit url , returned call page. same through program in android. i have tried below, consumer = new commonshttpoauthconsumer(key, secret); provider = new commonshttpoauthprovider(oauth_init_url,access_token_url, authorize_url); try { provider.retrieverequesttoken(consumer, oauth.out_of_band); log.d("tokens" , consumer.gettoken() + " -- " + consumer.gettokensecret()); } and request tokens. dont know how bypass next step. tried directly accessing accesstoken (stupid of me) provider.retrieveaccesstoken(consumer, "mycallback://callback"); no luck, ends in oauth.signpost.exception.oauthnotauthorizedexception: authorization failed (server replied 401). ...
Read more