Responsive/ Mobile Issues

Mobile responsive

- 5 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
- 5 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!
- 5 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 5 years, 5 months ago by Mirela.
- 5 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!
- 5 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!
- 5 years, 4 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!
- 5 years, 4 months ago wolframguddat
  Participant
  
  Expired
  
  This reply has been marked as private.
- 5 years, 4 months ago Mirela
  Participant
  
  This reply has been marked as private.
- 5 years, 4 months ago wolframguddat
  Participant
  
  Expired
  
  This reply has been marked as private.
- 5 years, 4 months ago Mirela
  Participant
  
  Hello,
  
  Please send us your wp credentials in a private reply. I can do it for you.
  
  Best regards!
- 5 years, 4 months ago wolframguddat
  Participant
  
  Expired
  
  This reply has been marked as private.
- 5 years, 4 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 5 years, 4 months ago by Mirela.

Viewing 11 reply threads

You must be logged in to reply to this topic.

Community Forums

Site Links

Useful Articles

Login