Support » Theme: Tiny Forge » How to show logo in smaller screens

  • Resolved MaartenBerk

    (@maartenberk)


    Hi,

    When I view this site on a smaller screen (iphone for example, or I change size of the browser window), the logo disappears. Is it possible to show the logo also on smaller screens? With a smaller logo image off course?

    Maarten

Viewing 15 replies - 1 through 15 (of 17 total)
  • Theme Author Tomas Mackevicius

    (@tomasm)

    Modify:

    #site-logo {
    	display: none;
    }

    in style.css

    If you want smaller logo, you will have to add it to header.php, but hide it for bigger screens in media queries (section 12). So it would be something like:

    #site-logo {
    	display: none;
    }
    #site-logo-small {
    	display: inline;
    }

    and in media queries for 600px and 960px you would add:

    #site-logo-small {
    	display: none;
    }

    Also check: http://www.w3schools.com/cssref/pr_class_display.asp

    hmmm, I tried, but believe this is out of my reach 😉

    Theme Author Tomas Mackevicius

    (@tomasm)

    I’ll see perhaps I will try to enable similar functionality in the next version. The main problem is the case if user uses logo, but doesn’t use header image, then there is no good place for logo in mobile view. With header image it is possible:

    View post on imgur.com

    eabigelow

    (@eabigelow)

    I was wondering if there had been an update on this?

    Theme Author Tomas Mackevicius

    (@tomasm)

    You can always do it with CSS. Find in syle.css:

    /* 3.4.1 Site Header */
    
    /* Theme Options - Site Header Logo */
    #site-logo {
    	display: none;
    }

    And comment it out or change to display: block;

    eabigelow

    (@eabigelow)

    Thanks! I will try that!

    eabigelow

    (@eabigelow)

    That brings the logo onto the page, but visually it is higher on the page than the site title. They should be horizontally in line with each other. Not sure how to fix that. Thanks again, though!

    Theme Author Tomas Mackevicius

    (@tomasm)

    eabigelow

    (@eabigelow)

    Still problems, but obviously this is going to be hit and miss with so many different mobile devices. Thanks very much for this, though! Much appreciated!

    Theme Author Tomas Mackevicius

    (@tomasm)

    I don’t remember, what is the site, you’re working on?

    BTW I increased minimum width to 770px for the first media query to make Tiny Forge run in mobile mode in 7″ tablets.

    eabigelow

    (@eabigelow)

    Theme Author Tomas Mackevicius

    (@tomasm)

    I saw Wander Wire (2005).

    OK, so you like to write stories and play with web… in this case you cannot miss this plugin, it was made for you:

    http://wordpress.org/plugins/aesop-story-engine/

    Theme Author Tomas Mackevicius

    (@tomasm)

    But I think it’s better to move that “W” to the left bottom corner as a background, because from the usability point it doesn’t help me read the content 😉

    Blog posts page you can assign from the admin/settings/reading => posts page

    eabigelow

    (@eabigelow)

    Hi, Tomas–

    Thanks for taking a look. I have about thirty more pieces that I have not put up yet. Right now just trying to get the basic site down.

    When you say “it’s better to move that “W” to the left bottom corner as a background,” does this refer to the home category and the brief description I have included there (which is over a W background)? Is this the specific area you are referring to?

    Again, thanks!

    eabigelow

    (@eabigelow)

    Aesop looks interesting!

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘How to show logo in smaller screens’ is closed to new replies.