Recent
Categories
View Replies (13)

J51_Carousel isn't responsive

  1. Issue
0
Votes
Undo
  1. antonietta
    antonietta
  3. Commercial Templates
  4. Tuesday, 09 March 2021
  5.  Subscribe via email
Hi Ciaran,

I 'm working in my web site: https://bit.ly/3cVeo84

I copied my web site here to work better:
https://bit.ly/31aYTDM

I have two problems:

1) if I see my web site here from mobile device: https://bit.ly/3vS8JZg
I have "J51_Carousel" with title "Le migliori ricette" which isn't working well from mobile
See the attachment.

I tried also to disable the module immediately below called "Ricette di primi piatti" by RAXO Allmode Pro without success.
The problem remains.

2) When you enter any page of my site you can see for a few seconds that the slide show images appear one below the other
and the backgroud image doesn't appear. Then the display corrects itself. See my attachment.

Is there any way to make the images appear correctly?

Thank you very much.
A nice day
Antonietta
Attachments (2)
Screenshot_Chrome Mobile.jpg Screenshot_Chrome Mobile.jpg
screenshot-layout.jpg screenshot-layout.jpg
Responses (13)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Antonietta

1. May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this issue further. For our reference please paste a link to this post in your email.

2. To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

.slick-slider {

    max-height: 415px;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
antonietta
antonietta
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

on March 1st, 2021 I sent you an email on March 10, 2021 as you advised me to access my site.
I didn't receive any reply.
Today I sent you another mail.

Thank very much.
Regards
Antonietta
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Antonietta

Strangely we do not appear to have received your email. Could I ask you to resend your email to info@joomla51.com and also cc my personal email (ciar4n@gmail.com) in case email is been filtered as spam.

My apologies for the inconvenience.

Kind regards
Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
antonietta
antonietta
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

I confirm you that this morning I sent the mail with the keys to both of your e-mails.

Thank you very much.
A nice day
Antonietta
  1. more than a month ago
  2. Commercial Templates
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Antonietta

We have added the following to the Custom CSS field of your template setting which should resolve this issue...

.owl-carousel .item {

    display: flex;

    flex-direction: column;

}

.owl-carousel h3 img {

    width: 100%;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 5
antonietta
antonietta
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you very much for your help.
Unfortunately, the problem remains.

I reported two problems at the beginning of this post. The other problem is this:

When you enter any page of my site you can see for a few seconds that the slide show images appear one below the other
and the backgroud image doesn't appear. Then the display corrects itself. See my attachment.

Is there any way to make the images appear correctly?

Thank you very much.
A nice day
Antonietta
  1. more than a month ago
  2. Commercial Templates
  3. # 6
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

This issue should be now resolved.I have amended the suggested custom CSS to the following...

#container_slideshow {

    max-height: 415px;

    overflow: hidden;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 7
antonietta
antonietta
Accepted Answer Pending Moderation
0
Votes
Undo
Hello Ciaran,

thank you very much for your help.

I'm sorry, but the problem persists.
I tested the web page on my Samsung Galaxy A50 smartphone and on mobile test web sites.

Thank you very much.
A nice weekend
Antonietta
  1. more than a month ago
  2. Commercial Templates
  3. # 8
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

For smaller screen devices, try also adding...

@media only screen and (max-width: 767px) {

#container_slideshow {

    max-height: 257px;

}}

@media only screen and (max-width: 460px) {

#container_slideshow {

    max-height: 170px;

}}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 9
antonietta
antonietta
Accepted Answer Pending Moderation
0
Votes
Undo
I added your script to custom.css without success.

I find it strange that this problem is so difficult to solve because the Carousel module is made by Joomla51.

I did a second test in another page: https://bit.ly/3cey6wH

- I deleted your latest script:

@media only screen and (max-width: 767px) {
#container_slideshow {
max-height: 257px;
}}
@media only screen and (max-width: 460px) {
#container_slideshow {
max-height: 170px;
}}

- I placed J51 Corousel in the module in top-2a
now everything seems to work

Thank you very much.
Regards
Antonietta
  1. more than a month ago
  2. Commercial Templates
  3. # 10
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Antonietta

My apologies as I didnt realize the carousel module was still causing you an issue. The suggested CSS was for the FOUC issue on the slideshow module on smaller screens.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 11
antonietta
antonietta
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

no problem. I have full faith in you and I thank you for your help ;)

I have two things to tell you:

1) I have a bit confused ideas about what should remain in the custom.css and what I should delete;

2) the J51_Carousel module is also working well for the mobile version since it is in top-2a.
There is only one problem: the title of J51_Carousel is too close to the left edge in both the desktop and mobile versions.

MOBILE version: https://bit.ly/3vVI8KU

DESKTOP version: https://bit.ly/399oktE

Thank you very much
A nice evening
Antonietta
  1. more than a month ago
  2. Commercial Templates
  3. # 12
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Antonietta

I have amended the title to your carousel module, applying the correct padding. I have also gone through your Custom CSS field and removed any unneeded CSS.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 13
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!