Mobile compatibility

Hello Everyone!

I am new to building a website and have the sydney pro theme!
I am having a major problem which may be considered a small problem to anyone that has experience. When I view my website on my mopbile phone the header image is cut off!! It looks horrible on my phone but great on the computer. Not only does my homepage look horrible on mobile but a few of my other pages do as well!

Is there anyway I can fix this and fast?

my page is www.stayfitwithbritt.com

I would really appreciate any help!

UPDATE: Hello! So after researching I was able to get the home page slider to work with mobile using a code I found on the forum. However, all my other pages are still not mobile compatible!! Can anyone please help me!!

Also, Is there anyway I can get rid of the second menu? I want the top one but there seems to be another menu below my homepage slider. There is also an ugly grey area under my slider! Trying to get rid of it!

Hello there,

Thank you for getting in touch here. Similar question had been asked. Please refer here.

For inner pages header background image, try to use the following selector:


.header-image{
  /* Style declaration goes here */ 
}

Let me know how that work for you.

Regards,
Kharis

Hi Kharis,

what do I put in the “style decleration” space? I am new to this and am trying to learn.

Also, can you help me out with another issue? Also, Is there anyway I can get rid of the second menu? I want the top one but there seems to be another menu below my homepage slider. There is also an ugly grey area under my slider! Trying to get rid of it!

Hello Ashley,

> what do I put in the “style decleration” space?

Try the following:


.header-image{
  background-position: top center;
  background-size: 100%;  
}

> Is there anyway I can get rid of the second menu?

I visited your site, but I couldn’t see it. Sorry. Could you please take the screenshot of it then post it here?

> … but there seems to be another menu below my homepage slider.

Please post a screenshot of it.

You can upload your image to the file hosting service like but there seems to be another menu below my homepage slider.

Regards,
Kharis

Hello,

I tried entering the code you gave me into simple custom css but it did not work. If you look at my page on a mobile device you will see the transformations page & about me page are not mobile compatible! I would really appreciate any help, thanks :slight_smile:

Hello there,

Try to apply the following CSS code:


.so-widget-sow-hero-default-4c4331502d87 .sow-slider-base ul.sow-slider-images .sow-slider-image-wrapper{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background-position: top center !important;
  background-color: transparent !important;
}  

.sow-slider-base ul.sow-slider-images li.sow-slider-image.sow-slider-image-cover,
.sow-slider-base ul.sow-slider-images li.sow-slider-image .sow-slider-image-overlay.sow-slider-image-cover{
  background-size: 100% !important;
  background-repeat: no-repeat;
}  

You may need to adjust the image container height on a particular viewport width to reduce excess spaces.

Let me know how it goes.

Regards,
Kharis