Problems Configuring My Logo with Minimal Theme

Community Forums Forums Design Tips and Tricks Problems Configuring My Logo with Minimal Theme

This topic is: not resolved

Tagged: , , ,

This topic contains 16 replies, has 3 voices, and was last updated by  Kevin Muldoon 1 year, 8 months ago.

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #10189

    Kevin Muldoon
    Participant
    Post count: 16

    I have replaced the website title text with my logo at http://www.kevinmuldoon.com/. It looks ok but unfortunately it doesn’t look right on mobile devices (the text does).

    What am I doing wrong? I’m confused to why it shows normally in browsers. Have I missed something?

    I want to revert to default text until this is resolved but I’ll keep it online just now to illustrate the problem better.

    Kevin


    Kevin Muldoon – Blogger & WordPress Fanatic.

    #10238

    Bill Murray
    Participant
    Post count: 575

    The tried and true approach is to create your logo in different sizes to match the media queries you are supporting at the bottom of your child theme’s stylesheet and adjust those media queries accordingly. Right now, your logo breaks the look on most tablets and some phones.


    Web: https://wpperform.com or Twitter: @wpperform

    We do managed WordPress hosting.

    #10243

    And_or
    Participant
    Post count: 42

    Hi Kevin, I usually find it easier to use the logo as a background on the #title-area (line 193 css)  instead of on the header.

    When I do that with your logo in Firebug it seems to work when I re-size the page. You probably will have to set the width of the #title-area to 100% and the background position to center on some of the media-queries in your stylesheet as well.

    Hope this helps…


    Simplicity is not Simple Webtaurus

    #10250

    Kevin Muldoon
    Participant
    Post count: 16

    Thanks for your help guys. I hadn’t noticed the mobile styling area at the bottom of the page.

    I’m unsure as to how to offer different versions of the logo as the logo isn’t linked in the stylesheet. It’s set in the header area of WordPress. How would I go about resizing it for different resolutions.

    Also, I noticed that the logo displays properly in landscape mode on the iPad. It’s only when I view in portrait mode that things are getting messed up.

     


    Kevin Muldoon – Blogger & WordPress Fanatic.

    #10253

    And_or
    Participant
    Post count: 42

    I just noticed this on line 1652 of the css : background-size: contain !important; If I comment that out, the logo stops being re-sized and already looks less messed up on the portrait phones and tablet… gives you time to sort it out further.

    You need to do something about the width of the menu on iPad landscape and 1024 screens as well. Reducing from 65% to 62 improves a lot. And change the padding on the links to: padding: 20px 12px; (line 294 ) then it fits next to the logo.


    Simplicity is not Simple Webtaurus

    #10255

    Kevin Muldoon
    Participant
    Post count: 16

    Thanks for that. It seems much better now. :):)

    I added padding-top:45px; to .menu-primary li,.menu-secondary li,#header ul.menu li in order to move the men down below the logo in portrait mode. It done the job but it adds a large margin at the top too for some reason. Any idea why?


    Kevin Muldoon – Blogger & WordPress Fanatic.

    #10332

    And_or
    Participant
    Post count: 42

    Hi Kevin, sorry I don’t have the time to dive in deep.. But I think the padding 45px is not such a good idea, works fine without it..

    Also the backgroundposition on line 1654 should be different: background-position: center 0 !important; (so not center center which causes the whitespace on top) You only want to center it horizontal in the header, and not also vertical..


    Simplicity is not Simple Webtaurus

    #10387

    Kevin Muldoon
    Participant
    Post count: 16

    Perfect. It’s looking great now in portrait mode.

    Do you know how I can place the menu underneath the logo in landscape mode too?

    Also, let me know if I can do anything for you in return. You’ve saved me a lot of time and energy by helping me with this :)

     

    Kevin

     

     


    Kevin Muldoon – Blogger & WordPress Fanatic.

    #10570

    And_or
    Participant
    Post count: 42

    No worries, others saved my ass and time many times before on the forum… nice to give back this time.


    Simplicity is not Simple Webtaurus

    #10594

    Bill Murray
    Participant
    Post count: 575

    @Kevin – I ended up taking a close look at your stylesheet while helping someone else in another thread who referenced your site. I noticed that you have version 2.0 of the theme, and there’s been a 2.0.1 update which fixed a few problems in the stylesheet. Since you’ve made a lot of changes, you couldn’t just do a copy-over type of upgrade, but it might be worth grabbing the update and looking at the differences.

    I noticed that near line 65 for the ID #title-area, you have a left margin setting of 10px. That is causing the left edge of the clickable area of your logo to be off (hover off the left edge and you’ll see what I’m talking about). It’s probably a good idea to drop that.


    Web: https://wpperform.com or Twitter: @wpperform

    We do managed WordPress hosting.

    #10632

    And_or
    Participant
    Post count: 42

    & for several widths the title-area needs to be adjusted… the (graphic) logo centers but link to home from logo is still in upper left-hand corner.


    Simplicity is not Simple Webtaurus

    #10665

    Kevin Muldoon
    Participant
    Post count: 16

    @Bill – Thanks. I’ve removed the margin. I’m not sure if it’s worth my time looking at the differences just yet as Brian mentioned on Twitter that a lot of themes will be getting updates soon.

    @And or – Was this an existing issue with the stylesheet. I’ve not changed anything with the widths etc.

    I’d love to see StudioPress make the process of adding a logo simpler. I know it’s not set up that way but the framework over complicates what should be a very simple task.


    Kevin Muldoon – Blogger & WordPress Fanatic.

    #13616

    Kevin Muldoon
    Participant
    Post count: 16

    I upgraded to the latest version of minimum. It fixed a lot of problems however there is still a problem with viewing the site. In the demo minimum shows the right sidebar underneath but on my site it’s trying to show the sidebar and as a result, it’s all been cut off. I’m using the default stylesheet so I’m not sure what is causing this.


    Kevin Muldoon – Blogger & WordPress Fanatic.

    #13677

    And_or
    Participant
    Post count: 42

    I see there is a div #featured-image-small .smallwrap which I do not know if it exists in the original Minimum? It has a set width of 1140px, where it should be max-width: 100% (maybe only at the smaller screen settings?)

     


    Simplicity is not Simple Webtaurus

    #13788

    Kevin Muldoon
    Participant
    Post count: 16

    I changed it to 100% but the problem is still there. Not sure that’s what is causing it.


    Kevin Muldoon – Blogger & WordPress Fanatic.

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.