CSS doesn't display correctly
-
I tried to change my blog theme from Ryu to Penscratch and I made a few changes in CSS that looked great in the preview, but once I applied the theme it didn’t work out. E.g. I enlarged the display area of the header to 100% . Preview: looked great. Once theme was applied: pixalated. The colour of the font wasn’t right and the formatting of the content didn’t work out. (I have two pictures next to each other that aren’t fixed (except for the first one). The pictures in the article are displayed under each other instead of 2 of them next to each other). I don’t understand why the preview works, but the outcome is terrible. (And yes, I did clear my cache and cookies). What can I do about this?
Thanks for helping,
ElliThe blog I need help with is: (visible only to logged in users)
-
For reference: With “Header” I don’t mean the one you can choose in the menu. I inserted my header (the 4 round pics) into the “Blog Title” menu under Logo and enlarged the display area. Like this the header is displayed above the blog title and not under it (but pixalated one the theme is applied).
-
Hello there!
I took a look at the image you have installed as your header:
https://zuckerfreunde.files.wordpress.com/2015/02/cropped-cropped-cropped-cropped-cropped-cropped-header-copy111.jpgI’m not seeing any difference between it and the way it displays as your header:
https://cloudup.com/cjgkHXiARq4If possible, send me a screenshot that displays the problem as you see it, so I can better understand the issue. You can simply upload the screenshot to your Media Library, like any other image, and I’ll be able to access it from there.
The page at the following link has some helpful tips for taking screenshots:
Just let me know when there’s something I should look at.
Looking forward to hearing from you. Thanks very much.
-
Hello again,
That’s because I haven’t switched to Penscratch theme, since it looked so terrible. The header works absolutely fine in the Ryu theme.
I’ve uploaded 2 screenshots to the Media Library. One of how it looks in the preview (Penscratch theme) and one of how it looks once I activate it. My “header” in the screenshot isn’t defined as a “header” by CSS & the theme (it’s usually only a place for a logo) and is therefore pixalated after activating. The normal place for the real header is UNDER the blog name and menu (Penscratch theme). But that just doesn’t make sense – it’s no header then and I would prefer it to be on top.
I hope that we can fix it somehow (even with my rather poor technical knowledge).Thank you for helping,
Elli -
Hello Elli!
It appears as if you removed the CSS from your Customizer, so I cannot be sure where things went wrong.
Could you explain what you were hoping to accomplish with the code?
Did you try to upload an image size that suits Penscratch’s specifications?:
Suggested width is 937 pixels. Suggested height is 300 pixels.Did you attempt to use an actual pixel amount, rather than 100%, in your CSS?
We do our best to display what your site will look like in your customizer, but your live browser may not read your CSS code exactly, since it’s also interpreting A LOT of other code from your site.
Thanks much.
-
Hello Robyn,
I think we have a little misunderstanding of the place where I’m trying to insert the picture. I know the Penscratch theme header suggests the size of 937 x 300 pixels. The problem is “where” the header is being shown. I’ve uploaded another picture for you (containing 4 screenshots) into my media library. I think this time it’s a lot clearer what it looks like when I insert the picture and the layout I’m trying to achieve. (I hope you can open it – it’s quite large: 1280 × 3402)
In screenshot 1/4 you can see what the layout looks like with the suggested header place. The picture is clear and it works fine (That’s the suggested 937 x 300). Just the place isn’t. That’s what I’ve been trying to change.
(Please pay attention to the red arrow showing you where I uploaded the picture, since that is about to change in screenshot 2/4)In screenshot 2/4 you can see the arrow pointing to where I inserted the picture this time and where it is displayed now. The place up there is perfect, just the size isn’t. It is far too small (and gets even smaller after activating). (That’s why I tried the 100 % instead of the actual pixel amount).
In screenshot 3/4 you can see the layout I’m trying to achieve. It’s perfect! The layout is achieved by some simple CSS knowlege. (I could send you the CSS in a screenshot if you want). The header is in the place, where it belongs. It’s large enough. It’s clear and not pixalated.
Well, but unfortunatley, after activating the theme (with the new CSS) it looks like screenshot 4/4. The picture is smaller than it should be, and pixelated. (There are some other problems as well, like the colour that changes back to the suggested theme colour. But that’s a minor problem, compared to the pixelated header. )
I hope that this time you understand what I was trying to explain (English is not my mother tongue. And well, CSS is a world of its own, that I’m definatley not part of.)
Thanks again for helping.
Cheers -
Thanks for the images and the detailed explanation! Super helpful. :)
Can you set up your site the way you want (even though its pixelated) so that I can see what you’re doing with the code and can experiment with some changes in my browser?
-
-
Thanks for doing that! Before you made those changes, your header image looked larger and crisper. Was that the look you were going for? When I experiment with removing your CSS code, the preview looks a lot smaller for some reason.
Unfortunately, I didn’t grab a screenshot. Did you look at the front of your site around the time I posted?
-
Yes, the larger picture is the one I’m going for (You can look it up in screenshot 3/4). As you can see the activated theme makes the pic a lot smaller and pixelated.
I know, that when you remove the CSS it gets even smaller. I guess that’s because the area isn’t the actual place for the header, but only for a small branding pic. That’s why I tried changing the size.
The time you posted the header was clear, because it was in Ryu theme, not Penscratch. Did you mean that? I’m trying to change from Ryu to Penscratch (because of the sidebar). In Ryu it works fine.
So, I guess it’s not possible then to change the small area up there in Penscratch theme to a larger one for the header?
-
The time you posted the header was clear, because it was in Ryu theme, not Penscratch. Did you mean that? I’m trying to change from Ryu to Penscratch (because of the sidebar). In Ryu it works fine.
Ohh, okay. Sorry for the confusion here. I never realized how similar Ryu and Penscratch are before! Let me take another look. :)
-
Alright. If you change this code snippet:
img.site-logo { width: 80%; max-height: 100%; }To be this instead:
.site-logo { max-height: 303px; }You should be all set. :)
-
Thanks for the suggestion – I just inserted it.
It’s not pixelated any more, but it’s a lot smaller now.
In the preview it works, but once I activate it, it’s all gone :( -
I guess the default settings of the theme won’t allow the display size to be changed in that way?
-
Thanks for your follow up! Sorry about that, I got caught by the slight URL difference between the preview and the front of your site. :(
There are a couple of ways you could make this happen with some CSS. However, you’ll need to create some matching media queries to make sure your site is still responsive and looks good on mobile devices. It’s a pretty big structural change to the theme, but someone over in our CSS forums should be able to help you out.
https://en.forums.wordpress.com/forum/css-customization
Post a link to the image you created for us and a run down of what you’re trying to do (image above title like the logo, but larger like the size of the header image) over there and one of the CSS gurus who hang out there will be able to help. :)
-
Thanks for having a look at it and helping me. I’ll think about your suggestion; for now I’ll just change it back to Ryu.
I apprechiate your effort.
-
Sorry I couldn’t be more helpful. But let me know if there’s something else I can do. :)
- The topic ‘CSS doesn't display correctly’ is closed to new replies.
WordPress.com Forums 
