Hi all, I apologize in advance if this is a really stupid questions- I am extremely "new" I guess you could say at building a website...it's not something I've gone to school for, strictly has been learn as you go type of deal. So please keep that in mind in that when answering this, I kind of need things really dumbed down for me- thanks in advance on that. So- Question: I have a website- highperformancejunkies.com it has 2 sidebars. On the right hand sidebar I have my website sponsors that I place their logo in this location with a link to their website's. I've specified that they get a 165x45 px image. I use wordpresses Jetpack Image widget as it allows me to easily insert an image on the sidebar, link to their site, prove alt text and specify which pages they are visible on with ease. However, my problem is as I have recently found out... when I put 165 width and 45 height into the widget, it isn't "listening" to me. So I know enough that this "should?" be able to be corrected with a custom CSS code? and I tried googling a few things, tried entering in things like {.widget #image-9 {width: 165px; height: 45px;} } why did input that? it was honestly a guess trying to utilize different info I found on google and on a whim that it might work... it didn't, I deleted it...found this website and hoping someone can help lol So coles notes: I want to make every jetpack image widget on my sidebar only be 165x45px. Is this possible and how do I do it? Again, thanks to anyone in advance who can help out.
You shouldn't size images with CSS _OR_ HTML if it can be avoided. Why don't you resize these images with the an image-resize plugin for Wordpress? Or resize them before you upload them to the correct size?
I don't always get the creative for logos sized correctly and I have used the resize feature in the plugin, but it doesn't want to listen... I guess I really just want to put that for the jetpack image plugin always size that widget to 165x45px to force it into place.... is that bad/would that cause me some kind of issue by doing that?
So I took your advice and tried resizing a test logo (the baby blue image under the "sponsors" area on the right hand side bar) I sized it at exactly 165x45px, put it into the widget sidebar, tested the page and inspected the element and it still for some reason resizes the image. I attached a photo of what I am seeing...the natural size is 165x45, the command is 165x45 but it's showing as 104x28 is there an easy way to correct this?
could this have anything to do with margins? I'm pulling at strings here being so new to this...Im running out of ideas to research to even explore to fix this problem
I'm just wondering where you got that 165px size from. None of the containers are 165px wide. And as far as I can see right now (two images, one for Turtle Wax and one for AMSOil) they both fit their container perfectly? But, the size of the container (the aside they reside in) isn't 165px - it's roughly 160 (but it's not defined in px, so it will probably never be an exact px size). Also, the size of the images used now are WAY too large. Rightclicking on either of them and "show image" shows at least the Turtle Wax one to be 10-15 times too big, if not more.
at one point I believe that sidebar was 165 not 169 like it is now. I can afford to scale all the logos down to 160, that is not a massive difference...but I need to be able to cap that container at 45px or so height wise. The main thing is I need all the images to be a consistent size. If amsoil gives me $5 a month and turtle wax gives me $5 lets say as well... it's not fair for one to have a bigger logo showing than the other. Ideally, worst case scenario is I would rather all the images be scaled up larger to 169 wide (the total width of the sidebar) versus going smaller like they are right now. Atleast that way when I have to go back to a sponsor and say the logo is a different size they are getting more than what they were promised not less. I can go back to Amsoil and turtle wax and have them resize their logo for me- but when I did this with just a test strip (made a blank baby blue solid fill image that was exactly 165x45) it still came out looking the exact same as the other logos currently showing...completely different size than its natural defined size. So is the solution to somehow change the container size? if so how can I do that?
I added it back in, but I put it on the "About me racing page" only - only because turtle wax is taking a look at some stuff tonight and I don't want it on the main page where they are looking. This is the link to the page showing the test image: http://highperformancejunkies.com/about-me-racing/ Thank you for looking at this!
Your side bar is sized at 1/6th the width of the document which has a max width of 1200px and min width of 320px. the column will max out at 200px width; so make that the actual width of the images. You cannot make the images a set width and height without distorting the images. Declare the image width to be 100% and let the height do what it will. At some point, you will need to let the side column move under the main content and have a more appropriate width along with its images.
So I just went in and set the Amsoil, turtle wax, and advertise here images to 200px and defined no height so that would be an automatic setting. Saved it and refreshed my website and the images all look the same. So something is forcing it to the size it is going to and not allowing it to go to the width specified. Unless I am missing a step? Thanks for the response hopefully this triggers more ideas! would be nice if it was that simple for me!
Okay - what I think you should do is put a padding: 0; (you might need to add !important) on either .c2 or .end (depending on whether either of them is in use elsewhere on the page, you might need to figure out which one you want to use). After that, you put width="200px" on each img, with no height set. This will allow the images to spread to the full width of the sidebar, without having to fit a height (it will be calculated automatically). That should in theory solve most of your problems, I think. The images won't be the exact same size, because they won't be the same shape (the Turtle wax one is circular (ish), while the others are square - that way, they will look different - nothing you can do about that, except demand that they all give you a specific size rectangular banner.
I am not 100% sure what you mean by that first sentence? - specifically what .c2 or .end means? I can solve the circular image by asking them to lay it on top of a rectangular background that is white, so that you won't see it (white/white with the background of the page) but locked together so that their logo stays proportionate. Now, on another forum a few minutes ago someone suggested I put this coding in: #tertiary .alignnone { display: block; border: 0 !important; height: Xpx; Weight:Ypx } It sounds like I think you're saying the same thing above...or is what you are saying different? If it is different, what is different and in your opinion is one solution better than the other?
Oh, the idiocies of grid systems! Go to http://highperformancejunkies.com/wp-content/themes/magazine-basic/style.css?ver=4.4.2 and on about line 85 (right before that whole list of .c2, .c3, .c4, etc.), add this: div.c2 { padding: 0 5px; width: 16.66%;} div.c2 img { width: 100%;} Code (markup):
So I can't thank you guys enough for helping me out here...looks like I had to play with things a little bit and do combination of both solutions. KK5st's code gave me the correct width when I changed it to the following: div.c2 { padding: 0 2.5px; width: 16.66%;} div.c2 img { width: 100%;} I changed the padding part to 2.5px and that gave me exactly 165px wide. Then, because my height wasn't cooperating, I used this coding in my CSS: #tertiary .alignnone { display: block; border: 0 !important; height: 55px; } I upped my height to 55 after looking at the 45px and not liking the aspect of it. The code above in the CSS alone would not work as it wasn't giving me the width I desired when I added width into the mix (it pretty much ignored that part) so with the combination of the 2 codes it looks like it works- so thanks a million!! One last question- is the way I have solved this problem correct? I mean it works, but is it something that could crash on me kind of thing? especially if I update my wordpress 4.4.2 on the next update?
This might crash on you, yes, unless you've created your own CSS-file (which is not affected by updates of WP or plugins) - it's never a good idea to modify things directly in the main code - I'm assuming this is the theme, and it's almost always better to use a child-theme than updating the theme directly, as if the theme is updated, you will loose any changes you've done.