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.
Related
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
Hoping this jumps out at someone...
I'm using Fancybox 1.3 w/Foundation. The issue I'm having is something in the Foundation CSS is forcing my Fancybox pop-up to render too small. When I inspect the HTML on the rendered page, I see an inline style setting the height at 175px...
I'm stumped. If I remove the Foundation CSS file the problem goes away. I'm guessing I need to change something in the Height attribute but haven't had any luck.
Sample:
http://198.cmsintelligence.com/site/about-us (click 'play this video')
Without more code it's hard to debug in dev tools. But I believe your culprit is here: #fancybox-inner object {
In DEV tools that ID is applying 100% height to an object, which is what is loading your video. The object itself has a height value of 600px, but it's being overridden because that ID above also has !important on the height.
Also the height of 175px you mentioned, that inline styling is being generated dynamically based on content nested deeper within. I don't believe the fault is there.
EDIT: Got it!
I have highlighted the culprits in an image below. The first is on Line 20 of fancybox.css - the last two line 1 of foundation.min.css (no doubt a huge reset rule). Override these in some way and you'll be golden.
#fancybox-inner embed, #fancybox-inner object {
height: 100% !important;
}
object, embed {
height: 100%;
}
img, object, embed {
max-width: 100%;
height: auto;
}
http://imageshack.us/photo/my-images/692/fancyboxbug.jpg/
Just an idea, maybe you've tried it since it's pretty in your face. Like you said, the inline style is making it 175px so why not override it in your Foundatino CSS.
div#fancybox-wrap{
height: 480px;
}
You can always add !important at the end of the height(ex. height: 480px !important;) to force it to be that height always, or use em (ex. height: 3em;) to make it fluid and change depending on the screen size your viewer is using. Again all newbie things since I'm not that vintage in this field but maybe that helps in some way.
I'm having a big issue with something so "small" I can't figure it out and I'm reaching out to everyone here. The issue I'm having is this:
I have photos which are roughly 512px or 800px wide I want to fit, CENTERED, in a circle display area and keep my hover effects. I also need to size them the photos so the centered part shows a decent amount of the photo.
The current code I'm working with will make them perfect circles IF the photos are perfect squares. The problem is when the photo is a rectangle, it turns into an oval.
I had created a div like below using overflow:hidden and the css but it conflicted with the current CSS. Any help would be appreciated immensely!
.thumby {
width:200px;
margin: 0 auto;
overflow:hidden;
position: relative;
height: 200px;
border-radius: 100% 100% 100% 100%;
}
img.absolutely {
left: 50%;
margin-left: -256px;
top: 50%;
margin-top: -200px;
position:absolute;
width:512px;
}
Here's the link to my dev pages.
http://www.lmcodebox.com/b-test/index5.html
http://www.lmcodebox.com/b-test/portfolio.html
have you thought about setting the image as the background of the div? This way you keep all the effects you already use and there are ways to manipulate the background position without affecting the outside div. Other possible solution to have perfect round divs, is to use the ::after pseudo-class, like in this gallery tutorial:
http://webdesignerwall.com/tutorials/decorative-css-gallery-part-2
Sorry if I misunderstood you, hope it helps.
PS.: Beautiful test page by the way.
Well first, you'd only need to set the border radius to 50% to make something a circle, and if each corner is the same value, then you can just enter it once like so:
border-radius:50%;
As far as these images being rectangles goes, you could set your images as the background of a span, give it a height and a width that forms as square and use display block. This would keep the photos proportional, but allow you to make them square.
This however, could create a bit of a markup mess if you have a lot of images to display. Another solution, which means more work, but I would personaly do it, is to just crop your images into squares for their thumbnail with photoshop or some other image editing tool.
Above all of that, I don't see a width or height actually declared on the pages you linked. Are you sure you've placed them on the correct class? I see the border radius declared, but I'm only seeing a max-width: 100%; not width: 200px or height:200px
I re-thought the problem with the suggestion of using the images as backgrounds of an element as madaaah did above.
What I ended up doing was wrapping a DIV around my A tag like this:
then, I set the background of the A like this: style="background:url(PHOTO URL HERE) no-repeat;background-position:center;">
lastly, I made a square image (800 x 800) to go inside the A tag so it would keep the round shape and made it completely transparent so the background image is visible, while growing and shrinking in a "responsive" manner.
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 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%;
}