Support » Theme: Tiny Framework » Wide Logo on mobile scales complete site

  • Resolved wpjap

    (@wpjap)


    I have tried to use a relatively wide logo and make it visible on mobile screens.
    1) I used the hints in the ‘comprehensive guide’ to enable custom logo for mobile view. I am using a child theme and put the code into my child’s style.css
    2) I set up a 400px wide logo (100px height)
    That works so far, but it scales the complete site on my mobile screen (which is 540px wide), including the textblock (content) and also the menu bar at the top.

    How can I prevent the scaling yet use a relatively wide logo?

Viewing 9 replies - 1 through 9 (of 9 total)
  • See here for three screenshots from my mobile phone:
    1) no logo
    2) 150px logo
    3) 400px logo
    https://postimg.org/gallery/1y3olqa4e/

    Theme Author Tomas Mackevicius

    (@tomasm)

    Interesting. Looks like some kind of CSS style “bleeding”.

    One thing you could try is to give exact measurements to that logo that would not cause scaling problem and then apply CSS style to logo element (or container that holds the logo):

    overflow: hidden;

    But it would be much better to see actual site and inspect code, to see what causes this behavior.

    Ih have no idea, what style bleeding is.
    What do you mean with “give exact measurements”? Should I use a max logo size that doesn’t cause scaling?

    With “much better to see actual site” you mean you could analyse better if you had the website address?

    Or could I use two different logos depending on screen size?

    Theme Author Tomas Mackevicius

    (@tomasm)

    Yes, if I see the site, I can open webmaster tools and see where those styles come from.

    “Bleeding” means that some style might affect other styles and it is not intended.

    Thanks for helping, Tomas! This is the website: http://probe.wogem.de/

    I have this idea as a workaround if we can’t find the reason for this scaling effect: Would it be possible to use a different logo in narrow screen sizes? Something like “use normal-logo.png except when screen-size is under 600px, then use small-logo.png”.
    (You may have noticed: I am not a coder 😉

    Hi Tomas. I know I can’t expect anything, but I am pausing any actions on my site while waiting for an inspection of the problems from the pro side (you). Are you planning to have a look?

    Theme Author Tomas Mackevicius

    (@tomasm)

    Goo, I’ll try to look at it this evening.

    Hi. I am still trying to figure out how to handle this problem.
    I would like to try to use a different logo on an mobile screen.
    But I have no idea how to do that …
    Can anyone give me some hint?

    • This reply was modified 2 months, 2 weeks ago by  wpjap.
    • This reply was modified 2 months, 2 weeks ago by  wpjap.

    Although this is a workaround to that initial problem in this thread, I managed to replace the custom logo in mobile screens with an alternative.

    I added to my child theme’s style.css:

    /*Do not display original logo: */
    @media only screen and (max-width: 500px) {
    	.custom-logo-link IMG {
    		display:none;
    	}}
    
    /*Show and define alternative logo: */
    @media only screen and (max-width: 500px) {
    	.custom-logo-link {
    		/*exact size of mobile logo: */
    		width:220px; 
    		height:100px;
    		box-sizing:border-box;
    		/*path to  mobile logo: */
    	  background-image: url("http://blablabla.xyz/wp-content/uploads/mobile-logo.png");
    	}}

    Does anyone have an idea how to replace the absolute path with a realtive one, because I plan to move the entire site to another domain and I would prefer not to have to edit these paths in the code.

    Thx for helping

    • This reply was modified 2 months, 2 weeks ago by  wpjap.
Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.