Header Slider Not Responsive on Mobile Screen?

Hi Everyone,

This seems to be a pretty obvious issue that the big header slider is not responsive on mobile device. But i did not see anyone was posting related post? So i assume this will be an easy fix?
Anyone could give me some tips on this? Thanks!

My site is: superaircleanser.com

Hello,

There are several topic that discuss about this in this forum, but all of them has different solution because it depends on their header image.

The desktop and smartphone has different screen size and this theme will try to adjust the header image to the screen so it will look fit to the screen.

I’ve just checked your site and the header image of your site is too wide, you can adjust the header image but you have to decrease the height of the image.
Please try to use the css code below:

@media only screen and (max-width: 320px){
  .header-slider {
    height: 275px !important;
  }
}

@media only screen and (max-width: 415px){
  .header-slider {
    height: 275px !important;
  }
}

@media only screen and (max-width: 768px){
  .header-slider {
    height: 650px !important;
  }
}

Thank you sir for replying me on both of my post. Let me try your code.

No problem, let me know if its worked :slight_smile:

Awan,

It fixed the image size issue but the header on my ipad shows incorrect color as what I assigned. Could you please take a look at it? Also, on the about and contact page, how i can get rid of thr gap between header and the banner image?

Thanks!

Awan,

I played with the CSS settings, and I found my ipad resolution is related to my desktop, which I can’t set different size of header slider… Anyway to fix this?? If this is the case, how i can distinguishably set different slider image size for ipad and desktop?

Thanks.

Hi,

Did you already manage the header color? I’ve just checked your site and the header color is green when it displayed in iPad-portrait but change to transparent when displayed in iPad-landscape.

Here is the screen size for the iPad:
portrait: max-width: 768px
landscape: max-width: 1024

Thank Awan,

I manually changed the menu background color via “rgba” to make it not black on horizontal iPad screen.

Also, thanks for your resolution info. However, I still can’t set different slider image width for horizontal iPad vs desktop, I think they share the same resolution, even though I put @media only.

I got some more slider text problem and I will start a new post regarding that since it’s different topic.

Thanks Awan.

Hello,

I have the same problem, “Header slider not responsive on mobile screen”, i copied the CSS code the moderator replied for “Awan” in thread “February 13, 2016 at 5:10 am, #200904”, and pasted it in my CSS theme Editor and updated it.

I got this message once i updated it:

“Parse error: syntax error, unexpected ‘only’ (T_STRING) in /home3/bdatos/public_html/strategybits.com/wp-content/themes/sydney-child/functions.php on line 20”

Now my website shows the above message above and i can’t do anything in my dashboard area. Website: www.strategybits.com

Please help out, how do i rectify this and the header slider.

THanks in anticipation.

Hi Stratos,

Please put the css code in above in styles.css file within your child theme, not in your functions.php.

Hi Awan,

It’s not working. I mean the slider responsiveness on mobile.

I placed the copied css there. (Not working)

  1. The menu header on mobile is too big.

Any help will be appreciated

Hi Stratos,

I’ve checked your site and your site is looking good already in mobile screen. Did you already resolve this?

Hi Awan,

I have figured it out. Thanks.

Is it possible to have sticky menu on all website pages on desktop mode only & not for mobile mode (as it covers the title of the pages in mobile mode?

Hi,

Yes, you can add the css code below to make the menu sticky on all pages:

.site-header.fixed {
    position: fixed;
}

Hi Awan,

It is not working.

Hi,

Firstly, you have to activate the option to sticky the menu from: Customizing > Header area > Menu style

Then apply the css code in above.

Let me know how it goes.

Regards,
Awan

Please how can i make my header slider responsive on mobile.

Hi

Please try the solutions in #200904 and please share the URL of your site also.

Regards,
Awan

this my URL printviewbrands.com please what do you mean by #200904 please explain to me in lay man’s language. thanks, i appreciate your responds.

I have pasted the code on my stlye css but the result is still the same as it was