Joomla Templates Club 406,261 posts

[zdmdesignz Friend zdmdesignzJoin date: October 2009Posts: 122Downloads:0Uploads:25 Thanks: 54 Thanked: 11 times in 1 posts]

#197823

Hello,

In general, the default @ media css responsive declarations for the slideshow are great. I am unfortunately running into a major issue at around 1366 x 784, which according to Google is the average. As you can see in the screenshot, the slideshow images are too large, and the slide-in text is too high in one instance, and too low in another (being covered by the slideshow navigation). It also could be decreased in size at this screen size. If I simply globally shrink the images and text, then they look horrible at larger screen dimensions.

I need to be able to shrink and adjust margins for the images and text at around 1366 x 784.

My question is two-fold.

1. At around 1366 x 784, what css selectors control the image sizes on the three separate slides and how would I accomplish shrinking them down at this dimension?

2. At around 1366 x 784, what css selectors control the text and/or text box sizes on the three separate slides and how would I accomplish shrinking them down at this dimension?

I will be adding the correct css to my custom.css file.

I have tried to select the images and text boxes with firebug and make css changes, but I’m not seeing it do anything.

Based off your answers, I will be making changes to the css in order to control the image and text sizes at larger screen dimensions.

Your help is very much appreciated. Thanks in advance.

Here is my site: http://www.zmdesignsbranding.com

Best,
Zechariah

---

Attachments:

1. 
2. 
3. 
4. 

[MoonSailor Friend MoonSailorJoin date: November 2011Posts: 1106Downloads:0Uploads:245 Thanks: 89 Thanked: 248 times in 223 posts]

#535645

@zdmdesignz: pls PM me ftp credentials of your site, I need to have a closer look to investigate the issue.

[zdmdesignz Friend zdmdesignzJoin date: October 2009Posts: 122Downloads:0Uploads:25 Thanks: 54 Thanked: 11 times in 1 posts]

#535978

For anyone who runs across these issue in the future, I found that adding @media queries to a custom.css file (templates/ja_sugite/css/custom.css) did the trick to shrink and enlarge the slideshow height at various browser dimensions where need-be The main selector that affected change was .ja-ss-item-bg

The following code is what I ended up using which has gotten me to a place where the slideshow looks presentable:

@media (min-width: 2000px) {

.ja-ss-item-bg {
height: 760px;
}
}
@media (max-width: 1600px) {

.ja-ss-item-bg {
height: 600px;
}
}
@media (max-width: 1200px) {

.ja-ss-item-bg {
height: 450px;
}
}

Zechariah

1 user says Thank You to zdmdesignz for this useful post

1. yangyangli

[zdmdesignz Friend zdmdesignzJoin date: October 2009Posts: 122Downloads:0Uploads:25 Thanks: 54 Thanked: 11 times in 1 posts]

#536326

Resolved.

Slideshow css selectors for the slideshow are:

Main background:
.ja-ss-item-bg

1. SLIDE #1
a. Text:
.rightright .ja-ss-desc

b. Image:
.rightright .ja-ss-item-img

2. SLIDE #2
a. Text:
.updown .ja-ss-desc

b. Image:
.updown .ja-ss-item-img

3. SLIDE #3
a.
.downdown .ja-ss-desc

1 user says Thank You to zdmdesignz for this useful post

1. yangyangli

[Author]

Posts