Home page slider issue on desktop and mobile.

[Shinestar]

Hi,

This is my second post on my last topic (#1027) but unfortunately, the last topic is marked as closed to new replies. so I am creating the new one.

this is regarding my slider issue which is still not working on all resolutions. for more please visit this link: https://responsivedesignchecker.com/checker.php?url=https%3A%2F%2Fwww.nappets.com&width=1400&height=700

My desktop slider images are hiding the details on some resolutions. Even there are some bugs on the mobile resolutions. mobile slider left & right icons are showing on the bottom of the slider.

Please help to fix this issue.

Thank you.

This field is Private Content.

[Aizaz Awan]

Hello, @@shinestar,

Sorry for the inconvenience, but could you please provide me the screenshot of the issues one by one so that I will check them accordingly on your site and help you out?

Best Regards,
PThemes Team.

[Shinestar]

Hi Aizaz,

Thanks for your response.

Here are the screenshot of the sliders issue. the image details are hidden on some resolutions.

Thank You

Attachments:

You must be logged in to view attached files.

[Aizaz Awan]

Hello, @shinestar,

Thank you for sharing the screenshots to help me better understand the issue you are facing. Upon reviewing the screenshots, it appears that the issue is specific to mobile device resolutions.

In order to resolve this issue, I would like to suggest that you try using the following CSS code in the theme options.

Please navigate to “Skins” and select “Custom CSS”. Once there, please copy and paste the code into the bottom of the black box and click on “save settings”. After saving, please clear your browser cache and check back to your issue.

CSS Code:

@media(max-width:575px){
.feature-container .vc_slide .vc_carousel-inner .vc_item{height:auto !important;
}
}

I hope this solution will help to resolve your issue. Please let me know if you require any further assistance.

Best Regards,
PThemes Team.

[Shinestar]

Hello Aizaz,

Could you please check why the slider is not coming on full screen on my mac. There is a lot of space in the left and right side. for more please check this link https://tinyurl.com/2ztxt2gk

Thank You.

[Aizaz Awan]

Hello, @shinestar,

Again it is the responsiveness issue, your MAC screen size is very high resolution and by default bootstrap has set the classes and code till 1920px of the screen resolution, so in order to solve your issue you need the Custom CSS code, Please copy and paste the below given CSS code to Porto >> Theme Options >> Skin >> Custom CSS and check back to your site after clearing the browser cache.

@media (min-width: 1921px) and (max-width: 4000px){
.home .feature-container .vc_slide .vc_carousel-inner .vc_item .vc_inner img {
    width: 100% !important;
}
}

We hope this will resolve your issue.

Best Regards,
PThemes Team.

[Shinestar]

Hello Aizaz,

Thanks for your response.

Unfortunately, this time slider has gone while it is showing in the backend (please check the attached file).

Could you please help me to fix this.

Thank You.

Attachments:

You must be logged in to view attached files.

[Aizaz Awan]

Hello, @shinestar,

I see, Kindly take a complete backup of your site first and then share your site wp-admin URL and credentials with me under the private content area and allow me to change/remove the plugins and debug your site to solve your issue.

Note: Please take the complete backup of your site before everything.

Best Regards,
PThemes Team.

[Shinestar]

Hello Aizaz,

Thanks for your reply!

We have fiexd the slider invisible issue but it is not showing in proper size. The images is hidden in vertical view. You can check the very first slider image where the dog head and the pot is hidden in slider area.

For more please check the attached file of the first slider.

https://images.squarespace-cdn.com/content/v1/58e362906a4963e3e83fa41a/1528101397503-TM0OQU8RPB699S0U5LA3/banner.jpg?format=2500w we have resize this to (1920X1080)

Please help us to resolve this issue.

Thank You.

• This reply was modified 2 years, 3 months ago by Shinestar.

[Aizaz Awan]

Hello, @shinestar,

The issue is caused by the slider height. so in order to solve your issue you need the Custom CSS code, Please copy and paste the below given CSS code to Porto >> Theme Options >> Skin >> Custom CSS and check back to your site after clearing the browser cache.

.vc_images_carousel .vc_carousel-inner .vc_carousel-slideline .vc_carousel-slideline-inner>.vc_item{height:auto !important;}

We hope this will resolve your issue.

Best Regards,
PThemes Team.

[Shinestar]

Hi Aizaz,

We have inserted the given code on the given location but stil issue not resolved. Could you please check with your end.

mobile slider also has some issue. the left right arrows are showing in the bottom of slider.

Thank You.

This field is Private Content.

[Aizaz Awan]

Hello, @shinestar,

I have thoroughly reviewed your website and I am pleased to inform you that the image displays correctly on both mobile and desktop devices. To provide you with a clearer understanding of the results, I have included a few images as attachments for your perusal.

To ensure an accurate representation, I kindly request that you clear your browser cache and revisit your website. This will help confirm the optimal display of the image.

Should you require any further assistance or have any additional inquiries, please do not hesitate to reach out. I am more than happy to assist you.

Thank you for your attention to this matter.

https://postimg.cc/R6L6STTC
https://postimg.cc/rDffmSQJ

Best Regards,
PThemes Team.

[Author]

Posts