Logo size issues (still) and image issues

It would have been better if you asked different questions in different topics. That way questions and answers are easier to find.

1. Do as you have already done with width 100%. You also might want to hide site description

#site-description {
    display: none;
}

2. Slider image is 660 x 300 but the math is not simple because slider image needs to look good for whatever layout user choose (1, 2 or 3 columns).

Calculations

In body tag font size is 1em meaning the browser default, usually 16px. If I only talk about ‘desktop’ size, Slider container width is 60em for two column layout and 64em for three column layout. Slider image take 64% out of that, so image width is

60 * 16px * 0.64 = 614.4px (this is shown in demo)

or

64 * 16px * 0.64 = 655.36px

Naturally I had to take bigger width, if user uses three column layout and rounded it up to 660px to be extra safe.

3. Link to your page where you have this situation. There must be too much padding in the image.

Kiitos Sami for prompt response.

1) Solved, thanks!

2) Aha, that explains it. No worries, reductions are done good. Solved.

3) Just posted a post that shows it. Image is added to the post “Full size” (which is 30×20) but turns out 20×13 – while the frame is 30×20.

Here’s the link to the post:
https://volvop1800club.se/00WP/2013/03/something-happens-with-the-flag/
Here’s the link to the original image (30×20):
https://volvop1800club.se/00WP/wp-content/uploads/2013/02/british-flag-icon.jpg

All images have 4px padding. You might want to add some class to images where you don’t want padding. Like this in child theme style.css.

img.flag {
    padding: 0;
}

This works for all images with class flag.

Or remove padding for all images.

img {
    padding: 0;
}

I am no coder I’m afraid. But if I add those lines (first set) in style.css, how can I add that property to a specific image?

(Elsewhere the framing is fine, I think)

You can add class to image when you edit post. Click Edit image >> Advanced settings and there is CSS Class text field.

Really appreciate this swift guidance Sami.

All solved.

Oops. Exactly what am I supposed to write in that one-row CSS field under Edit Image >> Advanced Settings?

If you use

img.flag {
    padding: 0;
}

you should add word flag in there.

Something is weird here. If I write “flag” in the CSS Class field and click “update” (under Advanced Settings), window is closed. But then when I open it again nothing has been saved (ie the word “flag” is gone). So image is still reduced in size and frame still there.

The exact text:

img.flag {
    padding: 0;
}

..has been entered and saved i Style.css.

That’s weird. It works for me.

That’s strange. I’ve tried with two other browsers now to omit the possibility of cache issues. I now see that “flag” is kept in the original post I linked to, this post. Do you see the flags not-reduced there? I dont, they look like before.

Or (warning: amateur guess) could it be that something should be added before these rows?:

img.flag {
    padding: 0;
}

For reference, this is now how my full style.css looks in the child theme (incl. the solved issues above) – below your @import url( ‘../path/style.css’ );

#branding img {
	width: 420px;
	height: 140px;
}

#site-title {
    width: 100%;
}

#site-description {
    display: none;
}

img.flag {
    padding: 0;
}

There is still no flag in the image class.

Really strange. The image has the word “flag” in the CSS Class Field under Advanced Settings. Code exactly as my previous post here.

For me the actual image gets reduced, whereas the (unwanted) frame surrounding it gets the image size 30×20, this goes for Chrome, Safari & IE. Same post as before, THIS ONE.

That image have classes alignleft wp-image-246. Do you have some caching plugin installed?

I have the default W3 Total Cache, but I empty it all the time when changing something. When it comes to images I have one widget to be able to post images in the right column simply called Image Widget and I also have a lightbox plugin called Lightbox Plus ColorBox.