Issues with mobile responsiveness (Topic #1: header size)

Hello, and thank you for an awesome theme, I really love Sydney!!! I’ve just finished creating a new site in the Sydney theme by myself (using lots of info from other topics in this forum, I couldn’t have done it without the help you have given to others). The website looks outstanding and I’m very proud of it, took me a long time, but I am really frustrated because I just can’t get to make it work for mobile (I have an iphone 5, but I also tried it on a Sumsung (android). I checked a lot of other topics here related to mobile responsiveness, and tried some css codes but none seem to work. Here are my main issues with mobile (one for each new Topic, as suggested):

  1. I used a video header on homepage and the thumbnail image for the video is too big (and video doesnt play, but that’s alright if it wont play). The first row of text behind it (the “Services” row, named on my website “Welcome / Bienvenido” is over the header image (in top of it), no separation whatsoever.

There are some more main issues (posted in separate topics) plus minor issues. Please, take a look at my website: dramaramainc.com . Like I said, it is perfect on computers, the issue is on mobile phones. I’m sorry for this being long, but all issues are related to the theme not being responsive on mobile for my website, and I really have no idea how to fix it. I have tried so many ways, but I really need your help.

Thanks for all your effort!

Hello @johnnyledu,

It looks like you have added this custom CSS code:

.wp-custom-header iframe,
.wp-custom-header img,
.wp-custom-header video {
	display: block;
	height: 650px !important;
	max-width: 100% !important;
}

height: 650px !important; seems to be causing this issue.

Kind Regards, Roman.

Hello Roman, thanks for your response and sorry for my late reply.

Yes, I added that custom CSS because when I added the video header on the homepage of the website (computer) the header height was too large, so that 650px was to reduce it, and it did worked on the website. So if I try taking it off for mobile responsiveness its gonna be too big again on the website. The video header I’m using is the wordpress one. What can I do then to fix it on mobile without changing the webpage look for computer?

Hello @johnnyledu,

You can wrap that CSS rule into CSS Media Query in order to make it work only on desktop resolutions. You can learn more about CSS Media Queries here:

Kind Regards, Roman.

Hello Roman, and thank you.

Wow, this is too hard! I’m a begginer and don’t know anything about coding, so reading all that about CSS Media Queries (I tried) is too hard to make sense of it. Of all the issues I had with Mobile responsiveness (other issues are more or less so worked out) this is still the one that’s troubling my website most by far!

And I’m thinking, if you see the header area on mobile, even reducing the image height or size of the video header, the text from the row below (Welcome/Bienvenido-Services section) is so much in top of the image that I think it needs some sort of padding between video header and Services row to separate them. Please help me. Thanks in advance!

Hello Roman (or whoever could help me),

I’m still waiting for help to fix this very important issue. Can’t make available page for public without resolving it. Any input, please?

Hello @johnnyledu,

I’m sorry for late reply, I missed your post for some reason.

It looks like this issue requires close inspection, this goes beyond our support policy. As an option, you can find a reputable freelancer on Upwork for this kind of service.

Kind Regards, Roman.

Hello Roman, and thank you for your attention and effort. But just one more alternative; what could be done just to create some padding space between the header area and the first row (Services “Welcome/Bienvenido” - only for Mobile)? Is it possible to separate and create space before that first row?

Hello @johnnyledu,

I would be glad to help you but this issue is quite complex because of custom code. And it looks like that custom code was built for one resolution ignoring others. I can’t dedicate that much time to one ticket.

Kind Regards, Roman.

It’s alright, Roman, thank you for your time and effort. I hope I can figure out a way.

Thanks!

You are welcome @johnnyledu!

Kind Regards, Roman.