Mobile optimization

hey guys,

I’ve got some problems with my website www.timkemmeter.de regarding mobile view. It would be great if someone could help me!

  1. I would like to disable the menu button as I do in my desktop view.
  2. I would like to have my website title and subtitle in the mid of my header, or even better crop the header a little bit.
  3. My phone number in the contact part is instead of white, grey. I don’t have any idea why.

and for the tablet view it would be great if the website shows up in the desktop view instead of the one row mobile view.

A lot of claims but perhaps someone can help me along!

Lot of thanks!

Tim

Hi Tim, du sag mal, wie hast du das im Footer gelöst - den Sydney Eintrag durch Impressum und Copyright ersetzt? Und dann noch die Slide-Effekte bei About und Kontakt?

VG Guido

Dear Tim,

> 1.

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or your child theme’s style.css?

@media only screen and (max-width: 1024px){
  
  #masthead{
    display: none;
    visibility: hidden;
  }
  
}

> 2.

Try to apply the following code.

.header-slider .text-slider-section{
  position: absolute !important;
  height: 100%;
  min-height: auto !important;
  transform: none !important;
  text-align: center;
  top: 0 !important;
}  

.header-slider .text-slider-section .text-slider{
  position: relative;
  display: table;
  width: 100%;
  height: 100%;
}

.header-slider .text-slider-section .text-slider .flex-viewport{
  display: table-cell;
  vertical-align: middle;
  position: relative;    
}

.header-slider .text-slider-section .text-slider .contain{
  margin-top: 60px;
}

> 3.

It seems you have been able to resolved it. Let me know if you still need an assistance about it.

> and for the tablet view it would be great if the website shows up in the desktop view instead of the one row mobile view.

Try to apply the following CSS code.

@media only screen and (min-width: 768px) and (max-width: 992px){
  
  .container{
    width: 100% !important;
  }
  
  .sydney_services_widget .col-md-4 {
    width: 33.33333333%;
  }
  
  .sydney_services_widget .service{
    float: left;
  }
  
}

I found horizontal scrollbar at the bottom of your page. To get rid of it, try to add the following.

html,
body{
  overflow-x: hidden;
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

One more thing…

> or even better crop the header a little bit.

Please refer here. You would need to adjust the viewport breakpoint values accordingly.

@media only screen and (max-width: 600px)

Regards,
Kharis

Hey Kharis,

first of all, thousand thanks! nearly everything is working perfectly!

My phone number in the “Contact” part is still grey on my devices. And is there any possibility to get the “About” section in two rows as well on the tablet view?

Again thank you very much! You helped me a lot!

Regards,
Tim

@guido

Hey Guido,

um den Sydney Eintrag zu ersetzen habe ich einfach etwas im Editor des Themes rumgespielt bis es letztendlich wie folgt aussah:

<footer id=“colophon” class=“site-footer” role=“contentinfo”>
<div class=“site-info container”>
"><?php printf( __( ‘Impressum’, ‘sydney’ ), ‘’ ); ?>
<span class=“sep”> | </span>
<?php printf( __( ‘©2016 by timkemmeter’, ‘©2016 by timkemmeter’ ), ‘Impressum’, ‘Impressum’ ); ?>
</div><!-- .site-info -->
</footer><!-- #colophon -->

Ohne wirklich zu wissen was ich da gemacht habe muss ich ehrlich zugeben.

Für die Slides benutze ich das SO Page Builder Animate PlugIn.

Ich hoffe ich konnte dir etwas weiterhelfen.

Liebe Grüße,
Tim

Dankeschön Tim, ich schau mal. Mir geht´s auch so - hab probiert und probiert und irgendwann kommt dann was Anständiges raus :wink:

Hello there,

Thank you for updating me.

> My phone number in the “Contact” part is still grey on my devices

Try to edit your contact widget, then wrap the phone number with an inline style rule. So it looks like the following.

<span style="color: #fff">01707306241</span>

> And is there any possibility to get the “About” section in two rows as well on the tablet view?

Try to apply the following CSS code.

@media only screen and (min-width: 768px) and (max-width: 992px){
  
  
  #pgc-2357-2-0, 
  #pgc-2357-5-1,
  #pgc-2357-2-2{  
     width: 42.967% !important;
  }
  
  #pg-2357-1 .panel-grid-cell, 
  #pg-2357-2 .panel-grid-cell, 
  #pg-2357-3 .panel-grid-cell, 
  #pg-2357-5 .panel-grid-cell {
     float: left !important;
  }  
  
  
}  

Regards,
Kharis

I just used a normal text widget for my contact part. I tried to implement the code there but unfortunately it didn’t work.

Hello,

I’m building a one page website with Sydney theme (www.jumpingpoundbrewing.com).
the issues i have are:

  1. menu is not sticky - i read that it is intentionally turned off but I would love to have it on for one-page website format
  2. on desktop, when i click the menu that’s connected to element ids, it does go to that panel but hides the upper part of the panel. it is the opposite on mobile. on my iphone, if I click the menu, it lands at the bottom of the panel before the one I selected.
  3. the ‘cakes’, ‘pastries’, and ‘bread’ part doesn’t readjust the size of the page but shows each food items as one row making the page very long… how can I resize them so that it looks similar to the web?

thanks!

Hello @julyhigh,

I replied it on your another thread https://athemes.com/forums/topic/sticky-menu-on-mobile-menu-scroll/

Regards,
Kharis