Viewing 23 posts - 1 through 23 (of 23 total)
  • Author
    Posts
  • #22898

    The logo is ‘centering’ with Chrome and Safari with iOS6 and on Android (as well as with IE10 on the PC) [though, all other browsers, on both PC’s and Mac’s, render it properly left justified]. Note: Cleared all data/histories many times.

    Here’s what we are seeing:

    Android:


    http://www.4vis.com/Android.jpg

    iPhone-Chrome:

    
http://www.4vis.com/iPhone-Chrome.jpg

    iPhone-Safari:

    
http://www.4vis.com/iPhone-Safari.jpg

    We are focused on phones for this issue (since most computer browsers and tablets are wide enough not to have this issue), but I thought I would send you a pic of a PC with IE10 just to show you another way to see the issue easily:

    
http://www.4vis.com/PC-IE10.jpg

    SIte Link:

    http://visualimpactsystems.com/

    CSS:

    http://visualimpactsystems.com/wp-content/themes/angular/css/custom.css

    Thanks for your time on this.

    Mark Besh

    Visual Impact Systems

    FYI: We tried all the suggestions in this previous thread:

    http://www.kriesi.at/support/topic/add-telephone-number-above-menu-headings#post-107244

    #117727

    Hi,

    Do you have a caching plugin enabled on your website?

    @media only screen and (max-width: 767px)
    #top .logo a, #top .logo img {
    display: block;
    margin-left: -100px;
    }

    The code above does work on our end. The margin-left: -100px is there just to show how much the logo moved when it is used.

    Regards,

    Ismael

    #117728

    Ismael,

    For whatever reason, the logo hasn’t moved at all for us (still centered). [Even after turning off out wireless, and viewing it at a Starbucks down the street using their wireless).

    Our site does not have any “caching” plugin, but our hoster told us aware that they have “aggressive caching.” So they showed us how to ‘purge’ the cache. We did so yesterday. Nothing has changed since.

    Is there some way we can change the related “php” code for the logo? (to ‘force’ it to the left).

    Mark

    #117729

    Hi,

    CSS controls the layout of the logo so editing the php files won’t do you any good. I don’t have an iPhone to check this out, I’m only testing this by decreasing my browser width. Let me tag the rest of the support team.

    Regards,

    Ismael

    #117730

    Hi,

    Make a backup of your current custom.css file and instead try using the css below (replace current code you are using with the code below but have a backup). In your custom.css file, a lot of the css doesn’t have enough specificity to override the original css. I didn’t change much of the code as much as added #top to everything, to make it become more specific thus overriding the earlier css.

    In your code i commented out margin-left: -100px because before it was not working, and now that it works, it pushes the logo to the left off the screen. You can switch it back on. But first see how this looks.

    http://www.clipular.com/c?5648256=4-3XOnM4633-G17DS5mCmdNz9pk&f=.png

    Also, where is your menu?

    Thanks,

    Nick

    #117731

    Nick,

    Thanks for taking all that time to rewrite our custom.css file.

    It did work right away! (all phones, tablets, PC, and Mac browsers showed it left justified!). But, we ‘lost’ our menu below the logo (on phones and when browser windows are not very wide).

    So, we put the following code in just after “#top .portfolio-title…”:

    .js_active .main_menu ul{display: block !important;}

    (where is was in our original custom.css file, and it started that ‘flashing’ again (showing the “ABOUT US” drop-down menu for 1/4 second).

    We spend an hour or so moving that code around (different load locations), and nothing worked.

    So, since this is a “live” site, we had to ‘regress’ back to our original custom.css file (to get rid of that ‘flashing’).

    Any ideas how you could add in some kind of code into the custom.css you suggested, and get our menu to display below the logo?

    Thanks,

    Mark

    #117732

    Hi,

    I just noticed this block of code which just may have something to do with the disappearing menu.

    #top .mobileMenu {
    display:none !important;
    }

    Your current custom.css file has invalid css which is not being read. You might as well just write abracadabra in there since it will be interpreted the same way. you need a { … So everything below and including this block in your custom.css file is not read correctly.

    @media only screen and (max-width: 767px)
    #top .logo a, #top .logo img {
    display: block;
    margin-left: -100px;
    }

    Thanks,

    Nick

    #117733

    Nick,

    So, I like to get back to your solution—-that fixed the logo to left justified.

    What/where do I add to your suggested css to get the menu to show up?

    Mark

    #117734

    Hi,

    Try this css instead of the css in your custom.css file

    #js_sort_items {
    font-size:14px;
    }
    #top .template-dynamic .callout {
    padding:4px 0 0px;
    }
    #top .template-dynamic .callout p {
    padding-bottom:0;
    }
    #top h1.ajax-portfolio-title {
    font-size:2.3em;
    }
    #top .ajax-portfolio-response {
    z-index:2;
    }
    #top .primary-background,#top .info_text_header,#top .infotext {
    background-color:#c20024 !important;
    }
    #top .ajax-portfolio-response-wrapper {
    top:40px;
    }
    #top .portfolio-title {
    font-family:"Trebuchet MS",Helvetica,Arial,sans-serif;
    font-size:14px;
    }
    #top .logo,#top .logo a {
    margin-top:-10px;
    float:left;
    }
    #top .phonenumber {
    color:#c20024;
    font-size:18px;
    text-align:right;
    }
    #top .phonenumber,#top .phonenumber a {
    margin-top: -10px;
    }
    @media only screen and (max-width:767px) {
    #top .logo {
    float:left;
    }
    #top .main_menu ul {
    display: block !important;
    }
    }

    You will see the menu. And logo will be on left.

    Thanks,

    Nick

    #117735

    Nick,

    Thank you for you effort on this.

    This solution made all computer and tablets browsers work just fine (left justified no matter how wide the window, and the menu dropped below the logo). The logo also is left justified on mobile (iOS6 with Chrome and Safari).

    But, the “ABOUT US” drop-down menu is now ‘flashing’ (showing for 1/4 second) when you go to any page (with both Chrome and Safari).

    We see that you remove the following:

    #top .mobileMenu {

    display:none !important;

    Could this be it?

    [ NOTE: We did not remove your suggested css, so you could see the problem on your smartphones ].

    Thanks,

    Mark

    #117736

    Hi,

    I have no way to test this but please try adding these 2 blocks and see if anything happens different, just please do it one block at a time to figure out which of the two does something, or that neither do anything.

    #top .infotext_wrap {
    display: none;
    }

    and

    #top .mobileMenu {
    display:none !important;
    }

    If this doesn’t work, do this. go bak to /js/avia.js to line 101 and paste this code (you took it out , but I changed it to trigger the mobile menu only at screen size of 1 pixel, in case there is something else here tied to that code somewhere.

    // improves menu for mobile devices
    jQuery('.main_menu ul:eq(0)').mobileMenu({
    switchWidth: 1, //width (in px to switch at)
    topOptionText: jQuery('.main_menu').data('selectname'), //first option text
    indentString: '   ' //string for indenting nested items
    });

    #117737

    Nick,

    Sorry to say, we tried both css items, and no change. Then added the avia.js code you suggested. Drop-down menu still flashing in Chrome and Safari.

    Could it be ‘where’ we put the “#top .mobileMenu…” code in the custom.css?

    Mark

    #117738

    Hi,

    Since I don’t see any of what you are describing, I am not sure. Please disable jetpack. On this forum you can find more bizzare issues solved just by turning that plugin off than anything else.

    I am not sure what I can tell you except setup a dev site and check step by step until the step that is causing this is located. You may also have had a mishap during an update or ghost data in there if you left the data import that comes with the theme in there.. id’s crossed in the options table (i am guessing) , because If you restart fresh, in a matter of an hour you should hit the exact cause of the issue, just please wait till everything is working till you turn on Jetpack or any extra plugins.

    Thanks,

    Nick

    #117739

    Nick,

    We disabled Jetpack, and nothing change.

    So, thank you VERY MUCH for all of your efforts in trying to fix this, but we have decided to just go back to what we had, and ‘deal with’ the logo centering in landscape mode.

    Even though it seems that everything is working fine, you did mention, before we started all this, that our custom.css is not properly written, and there are things that are not even being “loaded.”

    Could you point those things out for us?

    Thanks,

    Mark

    #117740

    Hi,

    I think Nick is right. Please try to setup a test site then try to fix the logo alignment there, see if it change. I’m really not sure but display: block really works on my end. This is what I see on my end when I use this code

    @media only screen and (max-width: 767px)
    #top .logo a, #top .logo img {
    display: block;
    }

    Regards,

    Ismael

    #117741

    Hi,

    I already pointed them out earlier http://www.kriesi.at/support/topic/angular-logo-centers-on-mobile-devices-should-be-left-justified#post-110304 and fixed the errors with the css I posted above.

    Could it be ‘where’ we put the “#top .mobileMenu…” code in the custom.css? .. You can put one copy of that block at the start and end of various css files, it won’t hurt anything, and since I am out of ideas, why not.

    Thanks,

    Nick

    #117742

    Nick,

    To remind you—when we put your suggested custom.css in there, we lost the mobile menu. Then we added the following, and the drop-down menu started ‘flashing’ again:

    #top .mobileMenu {

    display:none !important;

    }

    Then, when we replaced your “media” css with Ishmael’s above, we lost the mobile menu again (but the logo was left justified).

    @media only screen and (max-width:767px) {

    #top .logo {

    float:left;

    }

    #top .main_menu ul {

    display: block !important;

    }

    }

    Replaced with:

    @media only screen and (max-width: 767px)

    #top .logo a, #top .logo img {

    display: block;

    }

    Hmmmm.

    Mark

    #117743

    Hi,

    This CSS that you pasted above is not valid. So its not being read as you think it is.

    @media only screen and (max-width: 767px)
    #top .logo a, #top .logo img {
    display: block;
    }

    this is the same css written correctly

    @media only screen and (max-width: 767px){
    #top .logo a, #top .logo img {
    display: block;
    }}

    Also I didn’t write this CSS, this is what I found in your custom.css file and all I did is made it valid…. Since invalid css makes your site work better somehow, there is no need to fix anything.

    Thanks,

    Nick

    #117744

    Nick,

    Put your new rewritten code in there, and the mobile menu disappeared.

    I’m sure everyone is ‘frustrated’ with this, so I guess we’ll just have to ‘deal with’ the logo being centered in landscape view.

    I REALLY APPRECIATE all of your efforts in this. [ Because of your excellent support, we will DEFINITELY be using your themes for our clients in the future! ].

    Q: Do you have a more detailed ‘document’ about the Avia framework we can buy (other than the ‘basic’ doc we received with the theme)?

    Mark Besh

    Visual Impact Systems

    ISSUE CLOSED.

    #117745

    Hi,

    My bad. Good thing Nick pointed it out. This is the correct code

    @media only screen and (max-width: 767px) {
    #top .logo a, #top .logo img {
    display: block;
    }
    }

    Since you mentioned landscape, maybe this’ll help.

    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 900px)
    and (orientation : landscape) {
    #top .logo a, #top .logo img { display: block; }
    }

    Regards,

    Ismael

    #117746

    Hi,

    Sorry bout that. Most frustrating thing is not being able to replicate it.

    Could you set me up a temp admin account, I got one idea I want to try out. No worries, I am careful.

    usjahm (at) gmail (dot) com

    There is no documentation for the framework outside the documentation found within the templates themselves where the functions and variables are documented.

    Thanks,

    Nick

    #117747

    Nick,

    Thank you VERY MUCH for your time on this! (I trust you more than I do my guys).

    Login info sent to your e-mail.

    Mark

    #117748

    Hi,

    I looked at your setup and sent you an email.

    Thanks,

    Nick

Viewing 23 posts - 1 through 23 (of 23 total)

The topic ‘ANGULAR – Logo "Centers" on Mobile Devices (Should Be Left Justified)’ is closed to new replies.