Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #347763

    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.

    #347912

    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

    #347960

    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

    #348210

    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

    #348862

    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

    #349125

    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 9 years, 4 months ago by Elliott.
    #349158

    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!

    #349471

    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

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