Error with Responsive Design? Fresh & Clean Theme
-
Hi all,
I’ve done a fair amount of CSS customization already, but I’m having one final hitch in the design. I added a custom header and resized it to 140px using CSS. Unfortunately the right side of the header image (my name) gets cut off when the responsive web page is scaled down (even to iPad screen size). Keep in mind I have the mobile optimization turned off because there should be no need for that with responsive web design.
However, when I do keep mobile optimization active, I’m satisfied with the appearance on a smartphone-sized screen. My header image stays intact, and I’m ok with sacrificing feature images on the home page.
So…why doesn’t an iPad trigger the mobile-optimized version? I realize there is the Onswipe option for iPads, but I’d like to avoid that if possible – it seems slow and clunky to use.
Is there any CSS customization that can be done with the header image to make sure it stays intact with responsive design? Or is there something that can be done for iPads to trigger the mobile-optimized site?
Thanks in advance!
messagemanagement.wordpress.com
The blog I need help with is: (visible only to logged in users)
-
With your byline being part of the image, there isn’t really much way to keep it from disappearing since if the image were to be shrunk horizontally, the text on both ends of it would distort terribly and that would be unacceptable.
Firstly, and this will take care of another issue as well, would be to go back to settings > general and put the title and tagline back in there and then you can hide the title via CSS so it doesn’t interfere with your header. That means that it would be there for the search engines. Right now your site has no title that the search engines can grab (they can’t pull out of an image). Search engines like to see site titles.
Set the title as your byline, “by Dan Boneright” and the style and position that tagline over to the right where the byline now is in your image, and redo the image and remove the byline. When done right, the repositioned tagline will float as the browser window is narrowed. You can set a left margin on the tagline so that it does not run over the logo/title in the header image, which will mean that it will be viewable for most browsers with the possible exception of some smart phones.
If you want to do this, and need any help, we would be glad to do that.
-
-
Thanks for the great and quick response! I know you are very active in these forums and truly a great help to a lot of people. And don’t worry about spelling my name wrong, it happens often!
1. I’d be interested in doing this, but I’m concerned I couldn’t use the font I’m currently using (via Photoshop).
2. While I’ve learned a lot about CSS (in these forums and elsewhere) I’m not confident I could do all of that without a lot more help!
Again, I appreciate the advice very much, and if there’s a way to make all this happen I would be more than willing.
Thanks again!
-
You can use background-size to adjust the image so it doesn’t get cut off:
#branding { background-size: contain; background-position: center; }And you can even add media queries to adjust the horizontal spacing in the header area for smaller screen sizes so it’s more responsive:
@media (max-width: 650px) { #branding, .header-link { min-height: 92px; } } @media (max-width: 480px) { #branding, .header-link { min-height: 62px; } }However, thesacredpath is right about the image not looking super great when it’s squished down. I would totally take him up on the offer to try out using the site title and/or tagline together with a logo instead of putting the byline into the image itself like it is right now.
-
@designsimply, background size works here now? Last time I tried it it was stripped, so this is great. There have been a number of times it would have been useful.
There are a few ways we can do this Dan. You could make the byline into its own graphic and then we could use that as a background in the tagline element, but you might also want to see if something similar to the font you have used is available through Typekit as a custom font (appearance > fonts).
And @designsimply took me a step further. We can put he logo from the left into the site-title element and then put your byline into the tagline element and then have full control over positioning of both of them.
To proceed, create two images: One with your logo cropped down to just the logo plus a little surrounding white space if you wish and then create the byline image. Upload both to your media library and the post the URLs of those and we can get started
-
Wow. Seriously guys, I can’t thank you enough.
1. I’m OK with the CSS solution that @designsimply offered. The byline does look squished, but I can live with it. The media queries definitely helped a lot.
2. I know Typekit doesn’t have the font I’d like to use (Bernard MT Condensed) in the standard custom design format. I could try to use the advanced version, but it seems a bit above my head.
Edit: I didn’t see Bernard MT Condensed on typekit.com
3. I would be willing to go the extra mile in creating separate logo and byline images to have complete control over them. But you both have already helped so much, I don’t want to draw this out and take any more of your time.
-
Dan, you are welcome and that is ok. If you should you change your mind on the logo and byline, you know where we are.
-
Dan, one thing I’ll add is that the background size CSS has limited browser support (older browsers don’t know what to do with it). From w3schools.com:
The background-size property is supported in IE9+, Firefox 4+, Opera, Chrome, and Safari 5+.
IE8 and 7 users, and anyone on Safari 4 or older will still see the byline disappear if they narrow their browser window. This of course won’t be an issue with smart phones and tablets for the most part, just on computers with older browsers.
-
Good to know.
I’m thinking it wouldn’t hurt (and would undoubtedly look better) to try the separate images. But will I be able to keep my font? As I understand it that shouldn’t be a problem since we are still using an image for the byline.
Also, I’m not sure what pixel dimensions to make the new images. I’m a Photoshop beginner as well, so I would start by creating a new file, then copying the merged logo (or byline) and pasting it on to the new file, which would have appropriately sized dimensions.
Is there an easier way to do this?
-
Yes, create the byline graphic as an image in photoshop and you can use whatever font you wish. It is just that the logo at left and byline at right will be separate images.
I would open your existing header image file and save it as two new files. Then open each of those new files and crop out everything except for the bit you want in that particular file.
The logo on left can be kept at the same height as the header image, so just crop everything to the right of the logo and keep perhaps 50px of whitespace to the right of the logo.
On the byline, just crop it with a little whitespace around the byline text and we can then use CSS to position it correctly. I might even be able to get it is that the byline will slide over underneath the logo when viewed on a smartphone sized screen. That will sort of depend on the structure of the markup (HTML).
-
Sounds great. I’ll report back (and post images) when I’m finished. Thanks again for your help!
-
-
Here are both the logo and byline images:
Let me know if you need more white space or anything done differently. Thanks again!
-
Dan, those images work fine.
Get rid of these in your custom CSS:
#branding { background-position: center center; background-size: contain; } #branding, .header-link { min-height: 92px; #branding, .header-link { min-height: 62px; }Add these to your CSS
#branding hgroup { float: right; padding: 0 5px 0 0; width: 224px; } #site-description { background: url("http://messagemanagement.files.wordpress.com/2012/07/bylinecrop.jpg") no-repeat scroll right 5px transparent; height: 45px; width: 224px; } #branding { background: url("http://messagemanagement.files.wordpress.com/2012/07/logocrop.jpg") no-repeat scroll top left transparent; height: 140px; } -
A couple things I noticed:
1. With mobile theme off, the byline image cuts into the logo when viewed on a smartphone-sized screen.
2. With mobile theme on, the byline reverts back to my old byline (different font and color)
Is there any way to fix this? Otherwise I may have to revert to one static image as my header…
Thanks again for your help – I really appreciate it.
-
Also, if I can’t work out the current issue, do you know the CSS that would hide my site title? As you said before, it would be a good idea to name the site, but I wouldn’t want that to show up if I went with a static header image.
Thanks!
-
I know this thread has faded, but I just have one more question that I would be very grateful for an answer to.
I would like to keep FF Dax Web Pro as the font for the byline in my header image. I realize Photoshop doesn’t have import capabilities with Typekit, but I was hoping to possibly manipulate the byline font and size to use FF Dax Pro and move it to the right (where my current byline is).
Is that possible, or is there another way that I could incorporate that font in my byline?
Thanks again in advance.
-
@designsimply, background size works here now? Last time I tried it it was stripped, so this is great. There have been a number of times it would have been useful.
Yep! When we made some updates to the CSS editor recently, we added support for (almost) everything CSS3.
-
- The topic ‘Error with Responsive Design? Fresh & Clean Theme’ is closed to new replies.
WordPress.com Forums 