Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

CSS for images to resize with page

Posted on 2013-06-01
4
Medium Priority
?
712 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 2000 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
Over time, the online landscape has altered considerably, but that’s nothing compared to the up-and-coming trends that will shape the web design industry in the coming year. Keep reading to find out which trends will shape B2B web design in 2018.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
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.
Suggested Courses

572 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