Sydney Not Responsive on Mobile?

Hi!

Congrats for you great theme.

I´m loving Sydney, but I cannot get my website to work properly on mobile devices…

Everything messes up when open in mobiles and look crazy… From boxes to rows, pictures…

Do I need to upgrade to a pro version to get it OK? Is it my fault? Don´t know what else to do!

Cheers and thanks a lot for your support,

The website is tambourafilms.com

Hello there,

Visiting your site on my phone, I saw sever issues appear which is caused by your content setup. To fix it, please add the following CSS code into your site’s additional CSS option which resides under the Appearance > Customize > Additional CSS.


html,
body {
	overflow-x: hidden;
}

.widget-title {
	word-break: break-all;
}

.wpcf7-form input {
	max-width: 100%;
}

Regarding the issue with your contact form, please edit the text widget which hosts your Contact Form 7 shortcode, then leave empty the padding option.

Regards,
Kharis

Dear Kharis,

You´re the best!!! THanks a lot! It does look very nice now on mobile phones… How do you do it?!? :slight_smile:

(I think the contact form is working by itself now also!)

Have a lovely day

Hi,

I have the same issue and I don’t know how to solve it. I’ve tried everything and nothing works.

Am i doing anything wrong?

My website is www.blackcat.palcodasartes.com

I also seem to be having an issue with site’s slider responsiveness.
If I select RESPONSIVE for the “slider mobile behavior” option, it completely removes the slider on smaller screens.
If I select FULL SCREEN, the slider has a large amount of blank space above and below it on smaller screens, however, the slider is responsive at this setting.

Could you offer any solutions for this?

Many thanks

Hello Brendan,

Please share the link to your site, so I can take a closer look.

Regards,
Kharis

Hi Kharis,
could you visit my site? dazetechnology.com on mobile phone.
I would like that slider to be full screen and responsive for every screen size.
If I set in customize > header area > header slider > full screen for slider mobile behavior, the slider doesn’t work well because the size of slider are bigger than size of Mobile phone.
What can I do?
Thank you in advance

Hello Andrea,

I am sorry for the long delay.

It looks like it is responsive already. Have you been able to figure that out yourself?

Regards,
Kharis

Hi Kharis
it is responsive but I would like that slider to be full screen on every mobile phone. As I sad in the previous message if I set full screen in slider behavior, the slider doesn’t work well because slider become bigger than mobile screen size
Thank you

Hello there,

I’m visiting your site with my phone and it’s displaying like this:

Cloudup

Isn’t this what you want?

Regards,
Kharis

Hi Kharis,
I would like that image to be higher. You shouldn’t see “OUR SERVICES”. You should scroll down to see our services because of height of image slider.

Hello there,

The height of the slider image on mobile screen follows proportionally with the original dimension. So you should prepare some images which have higher dimension. Then replace the current ones.

Regards,
Kharis

Hi Kharis,
sorry but I have the last question.
I set three images for slider with following size:

  1. 2880 x 1350
  2. 1920 x 1041
  3. 640 x 426
    As you can see, the height of the slider image on mobile is very short but is the same for each image.
    So, how can i do for having slider image higher in order to see better the images?
    Thank you so much and sorry for many questions.
    Regards

Hello there,

Please try adding this extra custom CSS code:


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

  .sydney-hero-area {
    height: auto !important;
  }
  
}

Your three images should have identical size.

Regards,
Kharis

Hi, Kharis,

My website header is not currently mobile friendly. It works well on full screen and iPads, but when I go to a mobile phone the wording on the header does not fit to the screen. Please view my website below on a mobile phone and let me know you have any solutions.

http://www.creditcultivation.com/

Hello there,

Try adding this extra CSS code to adjust the main slide title in the smaller screen.


@media only screen and (max-width:991px) {
  
  .text-slider h2.maintitle {
      font-size: 40px;
  }  
  
}

@media only screen and (max-width:767px) {
  
  .text-slider h2.maintitle {
      font-size: 30px;
  }  
  
}

Regards,
Kharis

thank you, it worked like a charm.

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hello Kharis,

My website shows two menu buttons on the mobile version (one stays at the top of the page, the other menu follows you all the way down the page. Do you have any idea how to delete one of the menu buttons? Possible the one that follows the user down the page?

creditcultivation.com

Hello @QuamirB,

For your other questions, please post them in separate topics to help us easier track progress.

Regards,
Kharis