I'm rather clueless with regards to CSS, and trying to use the free Tumblr theme 'Astronaut'.
Currently I'm trying to figure out how to scale images proportionally for the 'face' of the blog (which is in a three-row style) while keeping the image intact in the main posts itself. I've tried figuring out where to place the width:300px (though that's only a guess as to what the max width of each 'row' is) and height:auto tags in their block, but it doesn't seem to be working. This is exclusive to text posts, image posts work fine.
The site, for reference.
And a pastebin of the layout.
Thanks for any help you can give me.
Try again what you mentioned in your question by adding height: auto; into your CSS:
#container .box img {
max-width: 100%;
height: auto; /* add this! */
}
This should scale the image down to the available width of the parent element if the image is larger and keeps the correct proportions of your image.
Related
I have searched for quite a bit and tried lots of stuff to fix this issue, including hiding the overflow in css.
I have an image that is linked to a video, for which the clickable area overextends the image, but only on the right side.
Relevant class: .overflow a (this was added as an attempt to fix from another answer)
Why is this clickable area so large, and how do I make it the same size as the image it encapsulates?
Firebug doesn't show anything out of the ordinary..
Your image is displayed as block, so it takes up the full width of the parent. You'r solution would be this.
.overflow img {
display: inline-block;
}
Try adding below CSS code:
.overflow {
display: inline-block;
}
I have a problem on my wordpress blog with the way posts are shown on the main page, and I think it's due to the size inside css/html, but I don't manage to find a solution. I'm asking for help.
The blog can be found at the URL: http://pavilionmagazine.org
As you can see on the main page, each post has the same size (due to css .post height: 600px; but when you mouse over they change size). I've managed to make the photo size the same, the excerpt to be the same number of characters, and the .post box is 600px high.
However, when you mouse over the posts they change their size and some of them (2nd, 5th, 8th posts from below) switch position. Why is that happening?
Because of each posts' size the grid has errors in it.
Why can't the posts be aligned, occupy the same size and make part of a nice fluent grid?
Thank you in advance :)
.post:hover needs to have a fixed height. Take a look at the two:
.post:hover {
height: auto;
}
.post {
height: 600px;
}
The auto height of post:hover right now is overriding your fixed height on .post.
As for position, inspect the two and see what else is being overriding by the hover values. Keep hover overrides to a minimum.
It seems that the .post boxes height is set to auto on mouseover.
So you have to edit your style.css file, line 350 and delete the css rule: height:auto;
Also, there are a lot of duplicated css rules on .post:hover. You can delete all and try this:
.post:hover {
background-color: #eaeaea;
}
I'm trying to make all product images the same height. I feel like I should just be able to add the following to ".product-image":
height: 300px;
width: auto;
position: absolute;
but that doesn't work here.
Here is a link to the page with the issue:
http://www.hothothot.com/shop/product-category/enter-at-your-own-risk-10/
How can I make these images the same size? again, I think that they should be governed by .product-images, but the only thing that seems to work is when I change the more generic "img" for media=All which then messes up other images on the site.
Please help. Thanks!
Remove height:auto; in your code and if you want a specific height on it then use height:50px; or whatever you would like.
img{
border-style:none;
vertical-align:top;
max-width:100%;
height:auto; // <--- Remove that
}
Online tools like picresize are great help in your case http://www.picresize.com/. You can resize the images so even with height:auto; it would work perfectly.
You can reference them via
.product-images img {
// css here
}
There appears to be no class called product-image, so this references any image within the a tag with the class product-images.
However, increasing the height when all the images are different sizes and the outer tag has a max-width may well lead to some images being stretched and looking odd.
Stretching small images can also make them quite blocky.
If the idea is for a tidy alignment, you are probably better setting a height on the .product-images tag and making the images vertically align within it.
(Also, the simplest way to make them the same size may well be to edit the images and upload them the same size)
The product-image class is on the link that surrounds the image.
The image itself has two classes: attachment-shop_catalog and wp-post-image.
So, you could try something like this:
.attachment-shop_catalog .wp-post-image {
height:300px;
}
The other issue is that the img has width and height specified in the html.
To make sure the image scales properly you should set the width to auto.
Try something like this:
.attachment-shop_catalog .wp-post-image {
height:300px !important;
width:auto !important;
}
I added !important so that it will override the hard coded html dimensions.
Hope this helps
When my website breaks at 800 pixels, my photo on this page moves above the text which is correct, but it also scales up to the width of my site, which is bad. How can I make it stop scaling up. I want it to always be the same size, about 392 pixels wide. I tried the code below, but it doesn't seem to work.
img { max-width: 392px !important; height: auto!important;}
now its doing this, locking the footer to the bottom. Ugh.
Option A
If you want it to always be the same size, change your css to this:
img {
width: 392px;
}
Here's a fiddle with both your original code and my answer. http://jsfiddle.net/DrydenLong/Rs5F5/
UPDATE
Option B
Since you cannot edit the existing CSS, add the following code, but make sure it is loaded after the existing CSS.
img {
max-width: 392px;
}
Option C
Or, if you have access to the HTML I would recommend using inline styles to do this. Something like below would also work.
<img src="..." style="max-width: 392px;">
I want the WordPress sidebars to have a specific height, NOT equal to the content to the post/page. Just 400px, for example. I'm working with atahualpa.
Which code in which PHP do I have to hack?
If I understand you correctly, you are going to want to edit a relevant CSS file--nothing more.
Figure out which selector is appropriate for the container you want to limit and add the attributes:
height: 400px;
overflow: hidden;
Or overflow: auto; If you want scrollbars to appear.
No php, do it in your theme's css file.