- This topic has 16 replies, 3 voices, and was last updated 11 years, 8 months ago by
.
-
Posts
-
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.
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.
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
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.
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
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.
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
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.
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
@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.
& 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
@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.
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.
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
I changed it to 100% but the problem is still there. Not sure that's what is causing it.
Kevin Muldoon – Blogger & WordPress Fanatic.
Sorry Kevin, I don't have a Minimum running here to compare it with. If you are using the default stylesheet you should be able to send in a ticket to Studiopress http://my.studiopress.com/help/
One thing I do see is that your background img is positioned wrong, should be center/center or center/top, now it is on the left.Also on the http://demo.studiopress.com/minimum/ the image is not a background, so your configuration is surely different.
Simplicity is not Simple Webtaurus
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.