Joomla Templates Club 406,261 posts

[Nancy Kimball Friend Nancy KimballJoin date: September 2014Posts: 65Downloads:15Uploads:34 Thanks: 33 Thanked: 2 times in 1 posts]

#691336

I am using the ACM Container Slideshow style-2 on the home page.

The slides are designed using an 18″ monitor with the screen resolution set at the highest setting 1280 x 1024px.
At this resolution, I think it looks good.

The trouble comes with my co-workers using the same 18″ monitor with it set to 1024 x 768px.
The slides look really bad.

Is there a way to make the image fill the screen at this lower resolution? 1024 x 768px.

It looked so bad on my phone, that I used a different slideshow module (Slideshow-Lite) with smaller images for the extra small size.

http://www.morleylibrary.org

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#691410

Hi

Your site also looks good at my end, do your co-workers experience the same issue with our demo site ? http://uber.demo.joomlart.com/index.php/blocks/container-slideshow

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#749242

Hi

Your site also looks good at my end, do your co-workers experience the same issue with our demo site ? http://uber.demo.joomlart.com/index.php/blocks/container-slideshow

[Nancy Kimball Friend Nancy KimballJoin date: September 2014Posts: 65Downloads:15Uploads:34 Thanks: 33 Thanked: 2 times in 1 posts]

#691646

The Demo site looks fine at 1024×768 see attached.

I changed the size of the Primary Button in the Top Right Menu to be smaller in the lower resolution. This fixed the menu dropping down into 2 rows.

I did this in custom.css

@media screen and (max-width: 1024px) {
.right-menu .nav li > a.item-primary {
width: 65px;
}
.right-menu .nav li > a.item-primary:after {
content: "LS2";
}
}

I still need the image to fill the slideshow. There is white space on either side and a lot of white space at the bottom.
The 3rd picture shows the white space on the bottom of the slide. And, now I see that it has made the next line down, with our Hours, drop down into 2 rows. Another problem.

[Nancy Kimball Friend Nancy KimballJoin date: September 2014Posts: 65Downloads:15Uploads:34 Thanks: 33 Thanked: 2 times in 1 posts]

#749331

The Demo site looks fine at 1024×768 see attached.

I changed the size of the Primary Button in the Top Right Menu to be smaller in the lower resolution. This fixed the menu dropping down into 2 rows.

I did this in custom.css

@media screen and (max-width: 1024px) {
.right-menu .nav li > a.item-primary {
width: 65px;
}
.right-menu .nav li > a.item-primary:after {
content: "LS2";
}
}

I still need the image to fill the slideshow. There is white space on either side and a lot of white space at the bottom.
The 3rd picture shows the white space on the bottom of the slide. And, now I see that it has made the next line down, with our Hours, drop down into 2 rows. Another problem.

[Nancy Kimball Friend Nancy KimballJoin date: September 2014Posts: 65Downloads:15Uploads:34 Thanks: 33 Thanked: 2 times in 1 posts]

#691647

Whatever I just did, messed up everything up in my normal resolution!

OK — back to normal.

I removed the code I added to the custom.css in the above message.

So I have fixed nothing!

Still need some help here.

[Nancy Kimball Friend Nancy KimballJoin date: September 2014Posts: 65Downloads:15Uploads:34 Thanks: 33 Thanked: 2 times in 1 posts]

#749332

Whatever I just did, messed up everything up in my normal resolution!

OK — back to normal.

I removed the code I added to the custom.css in the above message.

So I have fixed nothing!

Still need some help here.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#691721

May I know in which browser and PC can I replicate the issue? Because when viewing your site in my PC in 1024×768, there is only white space below the slide: http://prntscr.com/8jfyot

and this due to the fixed height set in backend settings of this module.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#749406

May I know in which browser and PC can I replicate the issue? Because when viewing your site in my PC in 1024×768, there is only white space below the slide: http://prntscr.com/8jfyot

and this due to the fixed height set in backend settings of this module.

[Nancy Kimball Friend Nancy KimballJoin date: September 2014Posts: 65Downloads:15Uploads:34 Thanks: 33 Thanked: 2 times in 1 posts]

#692003

Using Windows 7

The slideshow module has the screen height set to 700px
Most of the slides have the height set to 700px, width varies, about 1100px

This is how I want it to look. Monitor res. is 1280 x 1024

These are the problems when Monitor res. is 1024 x 768
Unable to read all the text. White space on both sides and bottom.

Chrome 45.0

Firefox 41.0

The same look for Internet Explorer 11

[Nancy Kimball Friend Nancy KimballJoin date: September 2014Posts: 65Downloads:15Uploads:34 Thanks: 33 Thanked: 2 times in 1 posts]

#749516

Using Windows 7

The slideshow module has the screen height set to 700px
Most of the slides have the height set to 700px, width varies, about 1100px

This is how I want it to look. Monitor res. is 1280 x 1024

These are the problems when Monitor res. is 1024 x 768
Unable to read all the text. White space on both sides and bottom.

Chrome 45.0

Firefox 41.0

The same look for Internet Explorer 11

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#692166

I guess when the screen size reduces, the image automatic resize to adapt with the ratio.

You can try adding this css rule:

@media (min-width: 768px){
.acm-hero.style-dark {
height: 700px !important;
}
}


into the file: root/templates/uber/css/custom.css (create this file if it doesn’t exist)

1 user says Thank You to Saguaros for this useful post

1. Nancy Kimball

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#749566

I guess when the screen size reduces, the image automatic resize to adapt with the ratio.

You can try adding this css rule:

@media (min-width: 768px){
.acm-hero.style-dark {
height: 700px !important;
}
}


into the file: root/templates/uber/css/custom.css (create this file if it doesn’t exist)

1 user says Thank You to Saguaros for this useful post

1. Nancy Kimball

[Nancy Kimball Friend Nancy KimballJoin date: September 2014Posts: 65Downloads:15Uploads:34 Thanks: 33 Thanked: 2 times in 1 posts]

#692349

Thank you Saguaros!

I added your code and that fixed the slides with the dark theme.
So I added one for the light theme & then I also changed the width of the Primary Right Menu button.

@media (min-width: 768px){
.acm-hero.style-dark {
height: 700px !important;
}
.acm-hero.style-light {
height: 700px !important;
}

}

Next task will be to update Uber.:((

Thanks so much!

[Nancy Kimball Friend Nancy KimballJoin date: September 2014Posts: 65Downloads:15Uploads:34 Thanks: 33 Thanked: 2 times in 1 posts]

#749608

Thank you Saguaros!

I added your code and that fixed the slides with the dark theme.
So I added one for the light theme & then I also changed the width of the Primary Right Menu button.

@media (min-width: 768px){
.acm-hero.style-dark {
height: 700px !important;
}
.acm-hero.style-light {
height: 700px !important;
}

}

Next task will be to update Uber.:((

Thanks so much!

[Author]

Posts