[Nancy]

I’m using the following CSS to resize the columns. I am using a featured image slider. Images are sized at 840×320. In FireFox 27.0.1, for some screen sizes, the images appear slightly smaller than then box and then snap into place. The problem seems to be when the image is 740px wide. Large or smaller, it seems to work ok. It seems to also work in other browsers (IE9, Chrome 33). Suggestions?

Site: http://ipcrew.com/SHSTest
CSS Code being used.

#primary { width: 840px; }
#secondary { width: 320px; }

@media screen and (max-width: 1224px) {
#primary { width: 740px; }
#secondary { width: 254px; }
}

@media screen and (max-width: 1060px) {
#primary { width: 616px; }
#secondary { width: 254px; }
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
#primary { width: 676px; }
#secondary { width: 254px; }
}

@media screen and (max-width: 960px) {
#primary, #secondary { width: 100%; }
}

[Sakin]

@Nancy: when I check in your site, it’s working perfectly. After you resize your browser you need to wait for a bit so that slider takes it’s shape.

[Nancy]

I’ve seen the problem on 2 different machines. It’s not a change in slider size. When the picture changes, it comes in and shifts slightly to the right. It doesn’t happen in other browsers or other images sizes. It only seems to happen with a fade transition as well.

Suggestions as to what else I should look at?

[Sakin]

@Nancy: It’s the effect. But if don’t want to right. Then you add the following CSS in “Appearance => Theme Options => Custom CSS” which will hide overflow.
#primary { overflow: hidden; }

[Nancy]

Tried that and it didn’t solve the problem. Other ideas?

[Sakin]

@Nancy: That is just an effect in fade. You can try different one if you don’t like that. Also for detail customization you can Hire a customizer.

[Nancy]

But if it was the effect, why does it work correctly in when sized differently or in other browsers. Perhaps it’s just a bug in Firefox.

[Nancy]

(I notice the same behavior with your live preview of the theme as well.)

[Sakin]

@Nancy: You can add light box shadow which will make it look like it doesn’t shift. This is the only option.

#slider-wrap img {
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

[Nancy]

That solves the problem. Thank you!

[Author]

Posts