chappie

Thank you, 2ninerniner2. Turns out I was trying to use the wrong password! I don’t know why I have multiple passwords for WP but I should have just tried admin/admin right away.

I guess no browser is perfect…and most people don’t change their partner when they discover their imperfections. Anyway, I owe plenty to Steve Jobs and a sub-optimal browser is a small price to pay.

Hi rakjanne. Please don’t listen to me as I’m a complete novice and this theme re-writes my graphics knowledge but…

I can’t see how your 1200x330px image can possibly scale gracefully to larger sizes since its height is limited to 330px.

What do you get when you upload a 1920x330px image, or 1920x500px? In theory that should display properly on your 24in screen – but you may have the same problem in reverse, i.e. your image gets cropped, when you view it on your laptop. If so, the compromise may be to include some non-essential pixels at the bottom of your image so that it can get cropped by the algorithm without losing the essence of the image.

That’s enough from me.

That did it. Thank you linux4me2.

I did go cross-eyed though as it took me three attempts to get all the tags/syntax in the right place, even though you gave me a perfect example – maybe I should try using a plugin next time.

Hi Dave – to scale down gracefully it needs to float in the middle of the right-hand section of the white footer…the same as the social icons float in the left section when they are in the footer. I tried:

margin-left:auto;
margin-right:auto;

but that didn’t do it.

Just to answer my own related question, I can similarly increase the line height (leading) in the main text areas with:

article.row-fluid {
line-height: 150%;
}

…which, imho, makes the default font and text size much easier to read in wide lines, eg with 1 sidebar or none.

I think the key for this newbie is trying to figure out what the different WP/Customizr elements are called so that I can be sure I’m trying to apply new code to the right bit.

Of course, I may soon discover that “article.row-fluid” applies to some other text somewhere that I don’t want to increase the line-height of, eg in widgets. (That’s not a question btw since I’ve banned myself from asking questions for the moment since once I start I can’t stop.)

I don’t know why the longer version didn’t work for me but this shortened version from another thread does the trick:

article.row-fluid {
width: 95%;

Thanks again.

Bingo! Thank you @joshkimmell. Huge thank you @acub (and @andrei). This one has been driving me nuts because I wanted it so much.

It now works perfectly and on all devices and I hereby bestow upon it my official Newbie Gold Rosette? (awarded occasionally to Customizr Snippets which deliver greatly and elegantly enhanced functionality to the original theme AND are easy for newbies to install AND are freely published by very kind people).

Hopefully Andrei will update the original Snippet page.

I just reported the same thing in the updated Snippet comments but Andrei says he has it working on his test site. But I’m checking the mobile window on a re-sized PC browser window – maybe the reveal arrows work on an actual mobile?

Understood acub – and I have taken up too much expert time here so I will try to let others have their turn. No doubt I’ll be back though!

Incidentally, my Safari has a very exciting Developer menu which shows me all sorts of stuff – none of which I understand. But I can see that I have a plugin called Fancybox installed – but since it doesn’t show up in my Dashboard, I assume it is built-in to the theme or to WordPress. In either event, it is unlikely to be the cause of any problem.

I’ll stop trying to learn/understand stuff for a while and just carry on building with the tools I have — which thanks to this community are more than adequate to create a very nice website.

Besides, there’s always the validation phase, where you spot typos and other minor mistakes.

Yes indeedy….Er, where would I find one of them? Do you mean the W3 validation website? Can it check my site on my localhost so that I can fix it up before publishing it?

Thank you and archived.

Thanks for doing that. I can see that it works. But I can’t see why it does nothing for me.

I have no plugins installed. And I removed all my Custom CSS code to test the padding code on its own – and it did nothing. The only real difference between your demo and my site is that my page has a standard 1170 Slider on it.

The silver lining is that I had a Snippet installed to remove the divider lines:

.featurette-divider {
display: none;
}

and I hadn’t realised that it hid the vertical divider between the main page and the sidebar (I only wanted to hide the horizontal divider at the bottom of the Home page). Now that the vertical divider is back, it increases the spacing between the two sections so my self-inflicted problem is now not such a worry. I would still like to increase the gap a little though… But maybe – when I find out how to increase the main page font size – I’ll be happy with the gap.

I think you may not be surprised to hear that the answer is ‘No’.

For some reason, I couldn’t get your suggestion to do anything but when I looked at the W3 page you pointed me to, I found and tried:

background-repeat:no-repeat;

…which may or may not be the same thing but it did stop the repeat when I changed the code to reflect the 40x40px dimensions of the image. However, the image is displayed exactly the same whether I use 30x40px or 40x40px in the code. But since it is small, it’s impossible to tell whether it is distorted or not.

So, count me as another very happy bunny.

Worthy of a Snippet imho — and even for consideration as an option in a future build of the theme since the default Page Icon is not a thing of great beauty in my eyes.

I’ve been playing with this and I think my problem was mainly due to using a landscape format image (41x31px). When I extended the image background so that the format was square (40x40px) I was able to tweak the CSS so that it displays nicely aligned. But I had to distort it a little in the CSS (to 30x40px) to fix a duplication problem:

https://s1008.photobucket.com/user/3785/media/public/PageIconimage.png.html

If I leave the dimensions at 40×40 in the code, the image starts repeating itself:

https://s1008.photobucket.com/user/3785/media/public/PageIconimagerepeat.png.html

Thanks guys. I’m no wiser about how the machine does its automatic scaling and cropping but I will suck it and see. If I have any reservations about the automatic results I can go the manual route.