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
Related
I have tried the following approaches but they do not seem to work for me (I'm sure I am doing something wrong - I need help in figuring out what it is). The image is in the HTML header section (not body).
I have bootstrap in the HEAD section (before the image and it gets picked up from the browser cache so hopefully it gets used for the image in the header)
I have tried adding the following to the CSS for the image (and when it did not work, I tried adding a div around the image and assigned the class to the div):
display:inline;
text-align:center;
margin:auto;
I also tried the following in the CSS when option 2 did not work:
display:inline;
margin:auto;
horizontal-align:center;
I tried display:block in place of display:inline as well. Any thoughts on fixing this (specially without relying on bootstrap would be quite welcome). Thanks in advance!
General css properties for centering elements:
{
display:block;
margin: 0 auto;
}
First, you can't set a margin on an element that is set to display:inline.
Here is a great guide that you should read:
http://www.tipue.com/blog/center-a-div/
Place the image in a div, and then put text-align:center on the div. That's it.
http://cdpn.io/aDBhq
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;">
This is a problem with a theme that I bought, and I have already tried to contact the owner (with no luck).
It should be a fairly easy fix, it's just that I can't work out how to do it! (I have done my research).
You can view the theme here: http://igeekify.com/_templates/liftoff/www/
To re-create the problem, just drag the window size so that it is smaller in width than the content, then scroll to the right. You will notice the header background doesn't stretch all the way.
The background image is for the DIV '#frame-header', which has the class '.wrapper'. I believe that the problem has something to do with the width of '.wrapper' which is defined.
Any help is really appreciated!
I think you might need to add a min-width property to the 'frame-header' div:
<style type="text/css">
#frame-header
{
min-width: 940px;
}
</style>
Try using the following code:
image width:100%;
I'm still relatively new to css positioning, but have read a few books and watched a few tutorials. I made some palettes over at colourLovers, and wanted to see how they would look when applied to a website as a color scheme. So, using the little coding knowledge I had, I created a page to demonstrate my color scheme. After a while, it became a sort of self-confidence boost, and I've gotten just about done with it when a little thing caught my attention.
I have a two-column layout - on the left, there is the navigation menu, with a header above and a content section to the right, all in their own divs. My question is this - when I scale the page (as in, make the window for viewing it smaller), the content section gets pushed so it wraps under the Div. The way I could fix this was to make an additional div with no bg color and make it as long as the content that contained the navigation div, so they would line up, but it doesn't fix it if you resize the window.
I'm sure there's an easy fix to this, but my limited knowledge doesn't yet know it. If it helps, I've attached an image file below of what the site looks like in my editor (Coda). I also provide a link to the code of that page of my site which I've uploaded to textsnip. You can find it here - http://textsnip.com/f434fd. I have added comments to mark the header, sidebar, and content sections as well. Any help would be greatly appreciated. Thanks in advance!
The easiest solution is to use min-wdith on your container:
<div style="width: 90%; padding: 10px; margin:0 auto; min-width: 400px;">
This won't work on IE6, but will work on everything else. And, if you need IE6, then there are several workarounds that will solve it.
I would suggest you to use % value instead of px.
For example:
Header: 100%;
Nav: 20%;
Content: 80%;
Footer: 100%;
This way, if someone rize the window, it will always display perfect.
Use "float: right" on content DIV. And replace px width with %.
Check out this
You can use CSS Media Queries to adjust things as they get bigger and smaller. For instance, if you wrap your entire page with a div with an ID of wrapper (and use Simon Arnold's solution for the width of the individual elements), then you can do this:
#media (min-width:1200px) {
#wrapper {
width:1100px;
}
}
#media (max-width:1200px) {
#wrapper {
width:90%;
}
}
These set your wrapper to 90% if the screen size is less than 1200px, and 1100px if your screen is bigger than 1200px. Thus, if the browser is wider than 1200px then your page will stay the same size, and if it's smaller then it'll flow nicely.
#media (max-width:700px) {
#wrapper {
width:100%;
}
}
That one makes it wider when the browser gets smaller, and
#media (max-width:400px) {
#wrapper {
width:400px;
}
}
that one sets it to a fixed width when the browser gets really small. Those are really simple queries, if you're interested in learning more about media queries then here's a good place: http://css-tricks.com/6731-css-media-queries/
And of course, it wouldn't hurt to make the page flow between those transitions using CSS3 Transitions.
IE8 and below, unfortunately, do not support media queries. BUT you could read their browser type with PHP instead, and direct them to get a decent browser... It'd help make the web better. ;)
i have an dynamic image gallery to display, using PHP...
My PROB
the style & positioning should be that if there is not enough space for a whole div, like in the image above, then the DIVs in the row should position them like the following
centered and equi distant...
here is JS-Fiddle basic template set, if somebody wants to try something on jsFiddle
If you wanted to achieve this with just CSS, the code would be as so:
#div {
clear:both;
width:500px
}
.img {
display:block;
width:150px;
height: 50px;
float:left;
}
As far as I remember, that's it..
Good luck!
Never "clear" the float (at least until the end of the grid).
Enclose each img in its own DIV with the float:left style,
Important: Give each of those DIVs the same HEIGHT (slightly larger than the largest photo), otherwise if the images are different heights you will get some weird floating.
Optional: If your images are different widths, and you want a nice 'grid pattern', then you can give all the DIVs a width property.
Beware of the effects of margins on overall height/width.
Also note that if you use the standard meta viewport tag on your pages to format them for narrow mobile screens, this will shove all your images into columns to fit that screen without shrinking them unbearably (provided something else doesn't make the page wide).
#div {
width: 220px;
height: 215px;
float: left;
}
you can achieve all of that simply with css width property for div
#div {
width:500px;
}
We implemented almost the same here
http://www.art.com/gallery/id--b1823/animals-posters.htm?ui=9E23F1D932F54F2F8F2E37851C860158
here also , you can switch between grid view and normal view , all we are playing around is with divs width
http://www.allposters.com/-st/Animal-Posters_c622_.htm
Google had the same problem with their image search... they had to overcome it with fancy scripting. Looking at the source, each row of images is a <ul> inside a <span>, and each image is in an <li>. Then when you resize the window, the images get moved from one <ul> to another. That's the best method they could come up with, apparently.
So, using jQuery:
blocksPerRow = Math.floor($('#container').width() / blockWidth);
$('.row ul').each(function () {
while ($(this).children('li').size() > blocksPerRow)
($(this).children('li:last-child').prependTo($(this).nearest('.row').next()));
while ($(this).children('li').size() < blocksPerRow)
($(this).nearest('.row').next().find('li:first-child').prependTo($(this).nearest('.row')));
});
I think that should do it. Add that to $(window).resize() as well as the document ready event.