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

Responsive/ Mobile Issues

Mobileresponsive
    • 9 years, 5 months ago wolframguddat
      Participant

      Expired

      Hey there,

      I really love the Specular Theme but encountered some issues for the mobile version of the (temporary) website:

      https://s602262362.online.de/

      1.) The counter on the frontpage is not counting upwards correctly…it stops while the page is scrolling and only continues when the scrolling of the page stopped completely (meaning that it just stays at 0 when you scroll over the counter slowly). Ideally it should start counting when you begin to see it and wouldn’t stop if you scroll. Alternatively it could also just show the “final” number instead of counting on mobile devices.

      2.) On the mobile front page there is a big blank/white space between the main menu/logo and the slider that should be eliminated. Didn’t find a way to get rid of the space. If I switch the header in the Specular setting to transparent, the space is gone, but that doesn’t make sense for this project.

      3.) Is it possible to display the top header (containing the contact info/social icons) on mobile devices? Didn’t find a setting anywhere and would be important to display it at this website.

      Would be great if these issues could be resolved. Thank you very much in advance!!

      Cheers,

      Wolfram

    • 9 years, 5 months ago Mirela
      Participant

      Hello,

      1-Are you referring to this counter, screenshot? These counters are not set to run all the time. They are started when the block containing them becomes visible and after reaching the set up value, it will stop eventually. If you meant another counter, please let us know.
      2-Please add this code into your custom css box:
      @media (max-width: 480px){
      .header_1.fullwidth_slider_page .top_wrapper { padding-top: 0 !important;}
      }
      3-Add this code into your custom css box:

      @media (max-width: 767px){
      .top_nav { display: block;}
      .top_nav .row-fluid .span6:first-child { width: 70% !important;}
      .top_nav .row-fluid .span6:last-child {width: 30% !important;}
      }

      Best regards!

    • 9 years, 5 months ago Mirela
      Participant

      Hello,

      1-Are you referring to this counter, screenshot? These counters are not set to run all the time. They are started when the block containing them becomes visible and after reaching the set up value, it will stop eventually. If you meant another counter, please let us know.
      2-Please add this code into your custom css box:

      @media (max-width: 480px){
      .header_1.fullwidth_slider_page .top_wrapper { padding-top: 0 !important;}
      }

      3-Add this code into your custom css box:

      @media (max-width: 767px){
      .top_nav { display: block;}
      .top_nav .row-fluid .span6:first-child { width: 70% !important;}
      .top_nav .row-fluid .span6:last-child {width: 30% !important;}
      }

      Best regards!

      • This reply was modified 9 years, 5 months ago by Mirela.
    • 9 years, 5 months ago wolframguddat
      Participant

      Expired

      Hi Mihaila,

      Thanks a lot for the fast reply!

      1.) Yes, that’s the counter I meant. It starts counting when the block becomes visible (that’s fine) but on a mobile phone suddenly stops counting when the user scrolls (even if there is very little movement). It continues counting only when the scrolling page comes to a complete stop… Is there a way to tell the counter to finish counting until it reaches the final number even while the page is scrolling? I encounter this on Chrome on iPhone. On Safari/iOS the behavior is different: The first counter starts and finishes correctly, but sometimes the 2nd and 3rd counter don’t even start…but sometimes when I reload the page they also count correctly, I don’t have a clue why the behavior is so different :/

      2.) The code works perfectly, awesome.

      3.) This code doesn’t make a difference, still no top header/contact info on iPhone unfortunately after adding the custom CSS…any idea what I should do?

      Thanks again!

    • 9 years, 5 months ago wolframguddat
      Participant

      Expired

      Hey there, do you have any ideas how to fix this? The page should go online asap so it would be really helpful to get some advice… Thanks a lot!

    • 9 years, 5 months ago Mirela
      Participant

      Hello,

      Sorry for the late reply.
      1-I opened your site several times in mobile, but i did not get the effect you are describing. The counter is depended and takes the instructions from the same files. Editing it, will affect counter’s behavior in all cases.

      3- Edit the max width to 480 and refresh page.
      Example: @media (max-width: 480px){

      Best regards!

    • 9 years, 5 months ago wolframguddat
      Participant

      Expired

      This reply has been marked as private.
    • 9 years, 5 months ago Mirela
      Participant
      This reply has been marked as private.
    • 9 years, 5 months ago wolframguddat
      Participant

      Expired

      This reply has been marked as private.
    • 9 years, 5 months ago Mirela
      Participant

      Hello,

      Please send us your wp credentials in a private reply. I can do it for you.

      Best regards!

    • 9 years, 5 months ago wolframguddat
      Participant

      Expired

      This reply has been marked as private.
    • 9 years, 5 months ago Mirela
      Participant

      Hello,

      I edited the code to this:

      @media (max-width: 767px){
      .header_1.fullwidth_slider_page .top_wrapper { padding-top: 0 !important;}
      .top_nav { display: block !important;}
      .top_nav .row-fluid .span6:first-child {width: 70% !important;}
      .top_nav .row-fluid .span6:last-child {width: 30% !important;}
      .pull-left {  width: 276px !important; padding-top: 6px !important;}
      .top_nav .widget { margin-left: 9px !important; height: 20px !important;}
      }

      This is the result in mobile: screenshot.
      And this code for the ipad:

      @media (max-width: 979px){
      .pull-left {  width: 420px !important;}
      }

      Result.

      Best regards!

      • This reply was modified 9 years, 5 months ago by Mirela.
Viewing 11 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