Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

My Website is no longer Responsive

    • 6 years, 1 month ago thisis3c.com
      Participant

      Hi there,

      Can you please take a look at my website? For some reason, it is no longer responsive and I’m not sure what happened.

      https://doulton-drive.thisis3c.com/

      Thanks

      Himashi

    • 6 years, 1 month ago Mirela
      Participant

      Hello,

      Can you please be more specific? I checked but the site looks resized in mobile. See screenshots:
      https://ibb.co/cDsyf1r
      https://ibb.co/VVVP3X7

      Let us know.
      Best regards!

    • 6 years, 1 month ago thisis3c.com
      Participant

      Hi Mirela,

      Can you please check now. You should see the issue now. There is an empty space at the top and bottom. The font sizes are also not resizing.

      Thanks,

      Himashi

    • 6 years, 1 month ago Mirela
      Participant

      Hello,

      The spaces in top and bottom are actually the header and footer. Because you don’t have any content in header and footer, they appear as empty. This does not mean the site is not responsive. The mobile/ipad view has different style than the desktop. So even if you have set up home page slider to be full screen in desktop, it will change in mobile. Because the mobile version does have header and in footer it is the reCaptcha.

      You can change this by adding this custom css:

      @media (max-width: 480px){
      .header_container {
          display: none !important;
      }
      #intro-slide p {
          margin-right: auto !important; 
          margin-left: auto !important;
      }
      .slide-text-container .container.container-content .cl-text.cl-element {
          width: 300px !important;
      }
      }
      
      @media (max-width: 767px){
      .header_container {
          display: none !important;
      }
      #intro-slide p {
          margin-right: auto !important; 
          margin-left: auto !important;
      }
      .slide-text-container .container.container-content .cl-text.cl-element {
          width: 300px !important;
      }
      }

      Best regards!

      • 6 years, 1 month ago thisis3c.com
        Participant

        Hi Mirela,

        Thanks for getting back go me. I’m still seeing the space at the bottom (the footer) even though I removed the reCaptcha. How do I get rid of this?

        Furthermore, when I try the website on my iPhone 6, the video is not working. It does however work on Android.

        I have used the below code temporarily to disable the videos for iOS but if there is a way to get it to work, please let me know.

        @supports (-webkit-overflow-scrolling: touch) {
          /* CSS specific to iOS devices */
          .swiper-slide:first-of-type {
            display: none;
          }
          .swiper-slide:nth-of-type(7) {
            display: none;
          }
        }

        Thanks,
        Himashi

        • This reply was modified 6 years, 1 month ago by thisis3c.com.
    • 6 years, 1 month ago thisis3c.com
      Participant

      Also, please note the videos do work on android.

      • This reply was modified 6 years, 1 month ago by thisis3c.com.
    • 6 years ago Mirela
      Participant

      Hello,

      I checked closer, the space is in fact the overflow of next slide. You can expand the visible slide to full-height by adding this css:

      @media (max-width: 480px){
      .swiper-slide.cl-slide.cl-slide-animation {
          min-height: 100vh;
      }
      .swiper-container {
          overflow: visible !important;
      }
      }

      The videos in iOS, you need to have the Webm version of the video too. For it to show well in mobile.

      Let us know.
      Best regards!

    • 6 years ago thisis3c.com
      Participant

      I added the webm version of the video but it’s still not working.

      I’m also having trouble with the scroll on android. Is there away to disable this?

      Thanks,

      Himashi

    • 6 years ago Mirela
      Participant

      Hello,

      Please add some wp credentials in a private reply. So we can check the video.

      It’s not possible to disable scrolling in mobile, but in each slide’s row settings (starting from second slide) you can select to disable row for mobile. This way you will have only first slide left to show in mobile and thus no scrolling available.

      Let us know.
      Best regards!

Viewing 7 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password