Solved

CSS for images to resize with page

Posted on 2013-06-01
4
688 Views
Last Modified: 2013-06-04
I'm having trouble getting pics in a Joomla slideshow to resize correctly. The slideshow is part of a Yootheme Joomla template, one called Infinity. But it's not a default part of the template; rather, it's an add-on that Yootheme doesn't fully support -- they should, but they don't.

The pictures are in a WidgetKit slideshow.

The pics display correctly, but when the browser page is made wider, the pic resizing lags behind that of the rest of the page by a half second or more. When the page is made narrower, there are often display problems as well.

Here's a test version of my site. The slideshow is right on the home page.

This is the html and css that cause the pics to display:

<div class="frontpage-teaser1"><img src="images/widgetkit/slideshow/blank-459x1200.png" alt="blank" width="1200" height="459" border="0" />
</div>
<div class="frontpage-teaser2"><img src="images/widgetkit/slideshow/blank-459x1200.png" alt="blank" width="1200" height="459" border="0" />
</div>

.frontpage-teaser1 {
	background-image: url(../../../images/widgetkit/slideshow/map5.jpg);
	background-position: 0 50%;
	background-repeat: no-repeat;
	background-size: cover;
}
.frontpage-teaser2 {
	background-image: url(../../../images/widgetkit/slideshow/students-on-grass.jpg);
	background-position: 0 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

Open in new window

I know it can be done, because other sites that use the same template have gotten it to work. Here are three of them:

I'd be grateful if someone could compare my site to the ones that are resizing the images correctly and tell me what css I need to add or change to fix the problem.

Thank you!

Regards,
Jon
0
Comment
Question by:Jonathan Greenberg
  • 3
4 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39213354
I'm guessing some kind of conflict - two functions trying to do the resize maybe. As the only difference I can see between the sites is your use of multiple js plugins.
Can you try disabling some of them?
0
 

Author Comment

by:Jonathan Greenberg
ID: 39213482
Thanks, Gary.  But I'm not sure what you mean, which is maybe to say that I'm not sure what a javascript plugin is.  Is jQuery a javascript plugin?  If so, are you referring to multiple versions of jQuery?  Or are there other "js plugins" that your seeing that I should try disabling?
0
 

Author Comment

by:Jonathan Greenberg
ID: 39213850
I need to correct something in my question.  Of the three sites I listed that use the same template as mine, only one is useful for comparison because the other two are WordPress, not Joomla.

The Joomla site that gets the images to display correctly is:
Sorry about the mistake!
0
 

Author Comment

by:Jonathan Greenberg
ID: 39220984
Thank you, Gary, you were correct.  I found and eliminated a couple of JavaScript plugin conflicts, and the display of the slides is now much improved.
0

Featured Post

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
ebay style="image-orientation: 90deg;" 2 41
How to position loader with CSS 3 42
Can't get container centered 4 16
Create an automated page index 9 21
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question