Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

CSS for images to resize with page

Posted on 2013-06-01
4
Medium Priority
?
708 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

618 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