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.
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
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'm working on a photography site with a lot of images and they have no fixed height and width as I want this site to be 100% fluid: how do you work around the ugly Chrome repaint of the images? (i.e. Images are first displayed at zero height and then rescaled to their final size moving around the entire layout)
I've tried pretty much everything and my last option is to hide the image repaint with a black div and then set its opacity to 0 when images are finished loading (BTW, I've tried this with a (document).ready call but it seems too soon: how would you do it?)
Specify your image's height and width attribute / its dimensions.
<img src="img.jpg" width="125" height="60" alt="My First Photograph ever">
This helps the browser avoid a second pass to layout your page and it optimizes page load as well! :)
Chrome (or any browser really) cannot avoid this 'repainting', since they don't know on forehand what size your images will be.
Thus, you will need to explicitly specify the sizes of your images, either in the image width and height properties itself, or via CSS.
I know I am more than two years late, but how about the practice suggested here?
<div class="embed-container ratio-16-9">
<img src="imgage.jpg"/>
</div>
.embed-container {
position: relative;
height: 0;
overflow: hidden;
background-color:black;
}
.ratio-16-9{
padding-bottom:56.25%; /* 9/16*100 */
}
.ratio-4-3{
padding-bottom:75%; /* 3/4*100 */
}
.ratio-1-1{
padding-bottom:100%; /* ... */
Also, an important remark from the comments section to pay attention to, and improve upon the original technique:
Nice trick. However, if I was you, I would replace the "img" tag with
a background image on your div (and background-size: cover or
contain). That would avoid you the position trick, the overflow trick,
and a lot of work for the browser.
I hope someone will find this useful.
It’s hard to test, but you could try setting width/height in CSS
img {display: block; width: 100%; height: auto;}
if you want the images to be full-width. This might prevent a full-page repaint, but of course there’ll be some repaint regardless as images load. You can also investigate what’s happening with Chrome’s --show-paint-rects
Hope that helps
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 am trying to change thematic default theme to take the whole browser page ...
for example: http://themeshaper.com/demo/thematic/
Is there a simple fix that can be done? I tried few things on that page with firebug but none seemed to have worked..
You can make the main container 100% width with CSS, but that would not only imply that you change all the width properties of the markup to percent values, as you'll not have the same result on different screens.
Also, it's quite difficult to work just with percent values when dealing with markup.
So, in conclusion, it might be possible, but quite hard if you don't master CSS.
The theme appears to be built with a "fixed" width layout -- meaning that the width of the page is set to a fixed value and resizing your browser window will not change the layout of the page. You are trying to change it into a "fluid" layout -- meaning that the page will adjust sizes to fit the browser window. Unfortunately, themes (and webpage layouts in general) are typically built as one or the other (fixed vs. fluid) and it is hard to switch between the two without changing a large amount of the CSS. So the answer to your question is: no, there is no simple fix.
Not sure about simple, here is some CSS to get you started, but you will probably find more as you dig into the different page styles, etc. Add it to the end of the main style.css for the theme.
#access, #branding, #main, #footer { padding-left: 20px; padding-right: 20px;}
#branding, #header .menu, #siteinfo, #main { width: auto }
#container { width: 70% }
#content { width: 90% }
.main-aside { width: 28% }
Also, beware of IE specific stylesheets, etc, that might change these same selectors.