I'm very new to Blueprint, as in started this morning, but one thing that struck me is the 'problem' of fixed width content like an image. What do I do if the image is wider than the columns it resides in?
I don't know about Blueprint specifically, but you could try
img {
max-width: 100%;
}
Related
I am programming spirit-safe.de, but I think the image is too high so I want to reduce the height. Do I best do this via CSS? Cant find the image in my Ruby on Rails code hence it must be in CSS I think or something.
No clue of Front-End :-)
Please advise.
Guess you are talking about your main image inside page-header container. Somewhere in your CSS files, you have this:
.page-header--hero.-main {
background-image: url(/assets/hero/img03_xl-326aaa5….jpg);
max-width: 1920px;
height: 900px;
}
That's where you are setting the image and height, just change them.
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
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.
I have an image that I am using as a loading animation that is 755px wide.
http://www.salts-studios.com/resources/working_large.gif
The things is I have a requirement in one section of an app I am developing where the image width must be fluid.
IE 8 is the main supported browser (I know, I know) so scaling the image up when required isnt an option.
I cant change the image, but I could create a new additional one so long as it looked identical in style to the original.
Can anybody recommend any technique to achieve a fully fluid width?
I've tried various sliding door techniques but they fall over as the image is animated.
Thanks in advance.
There's a rather simple solution to this. In a parent div, set it to width: 100%, and set the child image also to width: 100%. Here's an example:
.bar {
width: 100%;
}
.bar img {
width: 100%;
height: 19px;
}
And here's a JSBin that has a working example
Drag your browser window to different sizes and watch the image width resize. Let me know if this is what you were thinking should happen.
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. ;)