Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 7, 2014 at 3:43 pm #347763
    Mike-Hewett

    I am setting up a holding page and just have one little thing to resolve with the logo on mobile. As standard the logo scales down and aligns left on the chosen header colour.

    I don’t need a menu for now and really want to swap out @<767px to a different version that is optimised for mobile and have it centre aligned.

    I have added some custom CSS which is making the header space slightly taller and to load in the image but its being cropped on the right and i can’t figure out how to hide the other logo.

    I thought the php and css posted in this post might help but it seems to not have done anything – https://kriesi.at/support/topic/using-a-different-logo-size-on-mobile-devices-possible/

    Any support on this would be great as the limit of my CSS knowledge has been reached!
    Link to the website is in the private content below.

    Many thanks in advance.

    November 7, 2014 at 8:37 pm #347912
    Elliott

    Hi Mike-Hewett!

    I only see one logo image and it also has a background image applied to it which must have been a customization you did. Go ahead and remove all customization and do this again, https://kriesi.at/support/topic/using-a-different-logo-size-on-mobile-devices-possible/#post-273450, and let us know when your done so we can see what it’s doing.

    Cheers!
    Elliott

    November 7, 2014 at 9:53 pm #347960
    Mike-Hewett

    Hi Elliott,

    Thanks for replying. Feel I need to apologise before anything else, issues like this must be so annoying. I can think of comparisons to my actual areas of knowledge in design… Anyway. I cleared the ‘customisations’ and have both updated functions.php and applied the css quick styling. You’ll be able to see now why I need to swap out the logo or in the very least have it a bit bigger.

    Looking forward to the dev being around when we progress onto the full site build >_<

    Thanks again!
    Mike

    November 8, 2014 at 7:16 pm #348210
    Elliott

    Hey!

    Try adding this to your custom CSS.

    .responsive .logo { width: 100% !important; }
.responsive .logo img { transform: translate(-50%, 0px) !important; left: 50% !important; }

    I think that should center it on smaller screens but if your still seeing issues then let us know and we’ll take another look.

    Cheers!
    Elliott

    November 10, 2014 at 5:00 pm #348862
    Mike-Hewett

    Hi Elliott,

    Thank you for this, unfortunately its positioning it off centre rot the right rather than dead centre. The left edge of the logo looks to be the actual centre point.

    Cheers
    Mike

    November 11, 2014 at 12:28 am #349125
    Elliott

    Hi!

    In your source code I see this.

    .responsive .logo img { transform: translate(50%, 0px) !important; left: 50% !important; }

    But it needs to be a negative -50% like in my previous post.

    Best regards,
    Elliott

    • This reply was modified 10 years ago by Elliott.
    November 11, 2014 at 1:47 am #349158
    Mike-Hewett

    Hello, yeah it was -50% but i wondered what changing it to positive might do. It didn’t do anything. Just forgot to change it back…

    Changed it back now, sorry for any confusion!

    November 11, 2014 at 4:32 pm #349471
    Elliott

    Hi!

    It looks fine on my end. If your still seeing it as 50% and not negative 50% then be sure to clear your browser cache and any caching related plugins you might have installed.

    Cheers!
    Elliott

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.