Joomla Templates Club 406,261 posts

[jessehunt Friend jessehuntJoin date: June 2009Posts: 32Downloads:4Uploads:1 Thanks: 12 Thanked: 2 times in 1 posts]

#204451

On the main container slideshows I’m noticing that the images provided in the template are zoomed and thus a bit blurry when viewed on a large resolution screen. What would be the code area to change to set the default image size to something larger so that at full width on a high res screen they look clean and high quality? Thanks.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#562206

Just for better clarification, you can give me the screenshot with the describe on that and URL of your site here. I will help you to check it further.

[jessehunt Friend jessehuntJoin date: June 2009Posts: 32Downloads:4Uploads:1 Thanks: 12 Thanked: 2 times in 1 posts]

#562836

Yes, here’s an example. http://143.95.40.24/~sar/index.php?option=com_content&view=featured&Itemid=612

On that page the very first image in the ACM module is a bit blurry because it’s zoomed in. I’d like to show that image in full resolution and then have it scale down instead of up.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#562941

The solution below will help you out

Open templates/uber/local/acm/hero/css/themes/sar/style.css file

find and see

@media screen and (min-width: 992px) {
.acm-hero {
background-size: cover;
background-position: center center;
padding: 260px 0;
}
}

You can change my red mark above to padding: 320px 0;

[jessehunt Friend jessehuntJoin date: June 2009Posts: 32Downloads:4Uploads:1 Thanks: 12 Thanked: 2 times in 1 posts]

#563274

Thanks. I made this change but I’m not sure how that helped. It does not look like the image is any more clear. How does the padding size relate to the image size or quality?

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#563342

The original background image on your site has dimension of 1280 x 822, when your site loads in wide screen, this background image will be automatically scaled along with the screen size.

Unless you have a better resolution image, I’m afraid you won’t have background image looks good on this case.

[jessehunt Friend jessehuntJoin date: June 2009Posts: 32Downloads:4Uploads:1 Thanks: 12 Thanked: 2 times in 1 posts]

#563430

Ok, thanks. I can definitely use a larger resolution image but do I need to change anything in the code. Also, should I set the padding back to 260? I’m not sure why you had me change the padding…

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#563505

If you change a larger resolution image you have to change images/services/hero_services.jpg file and padding css style, because it’s background image and it also depends on div tags outside itself.

[Author]

Posts