Need help making Sydney theme responsive to mobile

Hi Kharis,

Thanks for your response. How do I attach screenshots to this message?

My first question is like you said – how can I change the font size to be smaller on my header slider?
My next questions relate to the testimonials slider, which shows a portion of the next testimonial in each one. And on this note, how can I slow the speed down on my testimonials slider on my website?
Also, under “Who can it benefit” and “Contact me” it looks like there is no image, but it is because it has been blown up and only the far left part of the image is showing. Is there anyway I can show the full image?

Thanks!

Let’s address them one by one to easily track progress.

> My first question is like you said – how can I change the font size to be smaller on my header slider?

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

@media only screen and (max-width: 991px) {
  .slide-inner {
    top: 40%;
  } 
  .text-slider .maintitle {
    font-size: 28px;
    line-height: 40px;
  }
  .text-slider .subtitle {
    font-size: 24px;
    line-height: 38px;
  }
}

@media only screen and (max-width: 600px) {
  .slide-inner {
    top: 35%;
  } 
  .text-slider .maintitle {
    font-size: 24px;
    line-height: 30px;
  }
  .text-slider .subtitle {
    font-size: 20px;
    line-height: 30px;
  }  
}

Regards,
Kharis

• This reply was modified 6 years, 5 months ago by Kharis Sulistiyono.

Hi Kharis, sorry for the very slow response. I used the code above and it works better, although the space above the text differs on each slider.
Can you please help me to slow down the speed on my Testimonials slider now? That is bothering me the most.
My website again is: https://www.healingthroughplay.co.nz
Thanks,
Cleo

Hello there,

To change the speed of testimonial slider, try doing the below steps:

1. Install and activate the TC Custom JavaScript plugin
2. Go To Appearance > Custom JavaScript
3. Paste the following code into the provided box

(function($){

  if ( $().owlCarousel && $('.widget_sydney_testimonials .roll-testimonials').length ) {
      $('.widget_sydney_testimonials .roll-testimonials').owlCarousel({
          items: 2,
          itemsDesktop: [3000,2],
          itemsDesktopSmall: [1400,2],
          itemsTablet:[970,2],
          itemsTabletSmall: [768,1],
          itemsMobile: [360,1],
          autoPlay: $('.roll-testimonials').data('autoplay'),
          slideSpeed : 400, // Default 200
          paginationSpeed : 800,
          rewindSpeed : 1000,          
      });

  }

})(jQuery);

4. Update

Set your own speed in this line:

rewindSpeed : 1000, 

Regards,
Kharis

Hello,

I’m new to this forum, so maybe the question has already been asked… Anyway, I want the header image on my website removed on smartphone and tablet, so you can only see the title and menu sandwich, and directly under it the page. On laptop and desktop I want the header image to be seen, cause I like it… Home page is slider, that’s okay
Tried several CSS I found on the internet but nothing seems to work. Here’s my url: https://www.afresco.be/wp

Thanks in advance

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

@media only screen and (max-width: 1024px) {
  .sydney-hero-area {
    display: none;
  }
}

Regards,
Kharis

Great! Thanks a lot! That CSS solved my problem.

@kharisblank I see that the image slideshow on the homepage is gone in smartphone and tablet view. The header image problem is solved, but the CSS created that new problem I guess..
Any suggestions? Thanks..

> but the CSS created that new problem I guess..

Which problem did you mean? Could you please be more specific?

Regards,
Kharis

Hi Kharis,

I see that you have been helping people quite a bit with your CSS skills. Thank you for your time and effort.

I have been enjoying the Sydney theme so far on my website: https://www.tallmountainmindfulness.com

I noticed that on mobiles, the menu disappears entirely. What do you recommend to make it appear again?

Many thanks,
Jason

@kharisblank
Hello Kharis,

Thanks for your answer.

The problem I mean, is that in mobile and smartphone view, the image slideshow is gone. In desktop view, you see what I mean; the slideshow of pictures on the homepage.

Hope you understand what I mean…

Grtz

Hello Kharis,

How are you?

I love Sydney but we have responsive issues on mobile. On mobile, the main menu has a black background and words are not centered.. .

Is there anyway to have a white background and centered words in the menu?

Best regards,

Louis

Hello @bluedragonagency,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

@media only screen and (max-width: 767px) {
  #mainnav-mobi ul li a {
    text-align: center;
  }
}

Regards,
Kharis

Hi Kharis,

Thank you for your help with my testimonial speed.
I am slowly getting there with making my website more mobile responsive.
There are still issues with the content being too wide for a mobile phone screen. Are you able to look at my website on a mobile device, and compare it to a desktop screen to see what I mean?

My website is: https://www.healingthroughplay.co.nz

The issues I have noticed are: All of my sections that are two columns have been reduced to one column and the picture isn’t showing. My testimonials slider shows part of the next testimonial. My logo on the footer isn’t centred. That kind of thing.

Look forward to hearing from you.
Cleo

hi
I’m struggling to make my customised sydney theme mobile responsive, resizing and especially slider text is an issue.
Any advise appreciated

n
website is https://www.dosmangosdesign.com