Joomla Templates Club 406,261 posts

[nsak Friend nsakJoin date: June 2011Posts: 182Downloads:5Uploads:13 Thanks: 55 Thanked: 5 times in 1 posts]

#1028738

Hi, I have a problem with the slideshow images on the front page of my uber/business site http://www.horeca21.com; when the display width changes they do not adjust, as I see they they do in the demo site at http://www.joomlart.com/demo/#uber;

any hint what has gone wrong?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1028877

Hi
Open /templates/uber/acm/hero/css/style.css

Find

.acm-hero.style-5 {
    background-size: cover !important;
}

replace it with

.acm-hero.style-5 {
    background-size: 100% !important;
}

Hope it helps

Regards

[nsak Friend nsakJoin date: June 2011Posts: 182Downloads:5Uploads:13 Thanks: 55 Thanked: 5 times in 1 posts]

#1028941

Hi Pankaj!

see the first image where it displays ok; if I reduce a bit the width of the screen (second image) it does not display ok

---

Attachments:

1. 
2. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1028957

Hi
Add below code in custom.css file to apply the padding value on device size 768px to 992px

@media (max-width: 992px) and (min-width: 767px) { .acm-hero { padding:200px 0!important; } }

Hope it helps.

Regards

[nsak Friend nsakJoin date: June 2011Posts: 182Downloads:5Uploads:13 Thanks: 55 Thanked: 5 times in 1 posts]

#1028981

no change Pankaj

the problem is only with the first slide that does not have a button; I see the other slides (that have a button) adjust pretty well; in the first one the footer comes up and hides the image

Nikos

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1028990

Hi
Kindly use below code in custom.css file it will work for first slide only

@media (max-width: 992px) and (min-width: 767px) { #mod-193 .acm-hero { padding:200px 0!important; } }

Regards

[nsak Friend nsakJoin date: June 2011Posts: 182Downloads:5Uploads:13 Thanks: 55 Thanked: 5 times in 1 posts]

#1029031

…not working, I dont even see a scroll bar on the first slide; see images of two slides/ same width

---

Attachments:

1. 
2. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1029039

Hi
Kindly add the code in a custom.css file and check the site in Real devices.
I have not found the suggested code on your site > http://prntscr.com/f0zjkw
also, let me know which devices you have facing the problem

@media (max-width: 992px) and (min-width: 767px) { #mod-193 .acm-hero { padding:200px 0!important; } }

this code is work for the tablet views.

[nsak Friend nsakJoin date: June 2011Posts: 182Downloads:5Uploads:13 Thanks: 55 Thanked: 5 times in 1 posts]

#1029076

…your code is in line No.1 in the custom.css

I think I will add a button in the front page and make it show ok like the rest; can you just advice where is the .css for the button formatting? i’ d like to place it at the top right of the page

thanks Pankaj

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1029081

The code is working on your site already. kindly check it real devices and share the device name in which u are facing this issue.

Its not like the code is not working.

[nsak Friend nsakJoin date: June 2011Posts: 182Downloads:5Uploads:13 Thanks: 55 Thanked: 5 times in 1 posts]

#1029084

Sorry, I’m not familiar with "real devices"; can you send soem url to check it?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1029199

Hi
Real devices mean please check it on your tablet,ipad, mobile and let me know if you have same issue.
If you want to apply above code for mobile too, kindly change the 768px with 200px.

Regards

[nsak Friend nsakJoin date: June 2011Posts: 182Downloads:5Uploads:13 Thanks: 55 Thanked: 5 times in 1 posts]

#1029242

see how it shows on a tablet…the footer comes too high up and hides the image

Pankaj, I will place small button on the front page and the issue will be resolved;

if possible, can you just advice how can I control the location of the button? best- Nikos

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1029255

Hi
The screenshot does not seem to be taken from the Ipad/Tablet.
here you can see its working fine
Ipad : http://prntscr.com/f1bt3l
Ipad pro view: http://prntscr.com/f1bt6p

If you want to add button you can add it from the module with ID 193.

The code is working fine, this is why i suggested you to check it in real device.
You can use Google chrome inspect element to check the same http://prntscr.com/f1bu1k

1 user says Thank You to Pankaj Sharma for this useful post

1. nsak

[nsak Friend nsakJoin date: June 2011Posts: 182Downloads:5Uploads:13 Thanks: 55 Thanked: 5 times in 1 posts]

#1029674

ok Pankaj

I think it is going to be ok; thanks for help

Can I ask about the the features intro module

I’ m using it in https://www.horeca21.com/index.php/en/users and I’ d like to change the width of the content to cover more of the screen; it is too much restricted at the moment, especially for large screens

[Author]

Posts