Testimonials Carousel Breaking in Tablet and Mobile

not responsive Testimonials carousel

- 2 years, 5 months ago lapizd
  Participant
  
  Expired
  
  Hi there,
  
  I added a testimonial carousel to this page https://dev.lapizd.com/psw/about-us/ and when viewed on mobile is its cutting off and in tablet you can see a small portion of the next testimonial.
- 2 years, 5 months ago Mirela
  Participant
  
  Hello,
  
  Please update theme and all included plugins first.
  Let us know if you still have any problem.
  
  PS: The latest update has many and major changes. We advice to always keep a backup of site and old theme files in case you have made any direct changes to them.
  
  Best regards!
- 2 years, 5 months ago lapizd
  Participant
  
  Expired
  Hi,
  
  I made the update as you suggested; however many things got broken. As far as I can tell all the options I had selected on the specular menu tab that has the (general options, header options, styling options, etc) did not get transfer. I did save the css, and the files on the child theme and also made a backup with the plugin duplicator. But I did not save screenshots or anything for this part. I am not sure what to do to recover this. Not sure if the backup will bring this back, Is there a way to recover this information?
  
  Also all the information on my widgets disappeared, Are they recoverable?
  
  I just noticed that my blog page also got broken and has an error.
  
  https://dev.lapizd.com/psw/blog/
  
  My credentials are on my profile. Let me know if you need anything else.
  
  I will greatly appreciate your help! This site is close to completion and we have a meeting with the client tomorrow and it will be terrible if the site continues broken.
  
  Thanks a lot!
  
  This reply was modified 2 years, 5 months ago by lapizd.
- 2 years, 5 months ago lapizd
  Participant
  
  Expired
  
  I just noticed that my blog page also got broken and has an error.
  
  https://dev.lapizd.com/psw/blog/
  
  My credentials are on my profile. Let me know if you need anything else.
  
  Thank you!
- 2 years, 5 months ago Mirela
  Participant
  
  Hello,
  
  The problem was with some major plugins not being updated as well. Please keep in mind to always update plugins after updating theme!
  
  I found this screenshot of your site in previous tickets:
  https://ibb.co/ckDSNWQ
  The footer widgets are only stored at the “Inactive widgets”, not deleted. I repositioned them. You can drag-and-drop to your wish again.
  I fixed some of the settings that are reset due to the update. Please check your site.
  
  Best regards!
- 2 years, 5 months ago lapizd
  Participant
  
  Expired
  
  I was finally able to get the site to how it was before the update. However the problem with the testimonial carousel added to this page https://dev.lapizd.com/psw/about-us/ persists. When viewed on mobile is its cutting off and in tablet you can see a small portion of the next testimonial.
- 2 years, 5 months ago Mirela
  Participant
  Hello,
  Please add this code into your Custom Css box:
  
  @media (max-width:480px){ .testimonial_carousel_element .caroufredsel_wrapper { overflow: visible !important; } div#fws_5ca61e2dec360 { padding-bottom: 220px !important; } }
  
  Let us know.
  
  Best regards!
- 2 years, 5 months ago lapizd
  Participant
  
  Expired
  
  I did and this is what happened.
  
  https://youtu.be/1l9HtutZgoo
  
  Looking forward to hearing from you,
  
  Diana
- 2 years, 5 months ago Mirela
  Participant
  Hello,
  
  Add a class to the row containing the testimonial and then add the padding to it. Example: https://ibb.co/zSmrGk8
  css:
  
  @media (max-width:480px){ .testimonial_carousel_element .caroufredsel_wrapper { overflow: visible !important; } .testimonials_section { padding-bottom: 220px !important; } }
  
  Let me know.
  Best regards!
- 2 years, 5 months ago lapizd
  Participant
  
  Expired
  
  The overflow :visible cause a horizontal scrolling breaking the page. I manages to fix it with the code below
  
  @media (max-width: 480px) {
  
  .testimonial_carousel_element .caroufredsel_wrapper {
  
  height:330px!important;
  
  }
  
  .testimonial_carousel .item p{
  
  font-size:18px!important;
  
  }
  
  .testimonial_carousel .item .param h6 {
  
  font-size:18px!important;
  
  }
  
  }
  
  @media (min-width: 620px)and (max-width: 767px){
  
  .testimonial_carousel .item{width: 550px!important; }
  
  .testimonial_carousel .item p{
  
  font-size:18px!important;
  
  }
  
  .testimonial_carousel .item .param h6 {
  
  font-size:18px!important;
  
  }
  
  }