Sydney theme - Website content not fitting on mobile device

Good day,

I have successfully created and launched my website using your Sydney theme. It looks great on PC or laptop, but certain things are out of place when visiting the site on any mobile device.

Problems I am experiencing are:
> My header logo blocks my main menu
> My front page media (images) is way too big
> My social media buttons are in the middle of my footer widget

My website address is http://fuelangelau.com/

Please could you help me resolve my issue.

Thanks in advance!

> My header logo blocks my main menu

Did you add custom CSS code to modify your header layout on smaller screen?

> My front page media (images) is way too big

I found the following CSS code is causing this trouble. Please remove it.


#pg-50-1 > .panel-row-style {
    padding: 0px;
    width: calc(1300px);
}

> My social media buttons are in the middle of my footer widget

Did you add extra CSS code to place the icons to the site credit area?

Regards,
Kharis

Thank you Kharis for your prompt response!

> Did you add custom CSS code to modify your header layout on smaller screen?

No I have not added any custom CSS code for smaller screens for my header, I was under the impression it would resize according to screen size automatically. The custom CSS code I have added to modify my header is the following:
#mainnav ul li a {
font-size: 20px;
margin-right:-10px;
top:20px;
float:right !important;
}
.site-header {
height:140px;
background-color:black;
}
.site-header.float-header {
height:120px;
background-color:black;
}
.site-title {
text-indent:-9999px;
height:10px;
}
.site-logo {
height:75px;
width:200px;
position:fixed;
margin-left:-140px;
float:left !important;
}
Another problem is when scrolling on a mobile device the header does not have the black background like on the PC website.

> I found the following CSS code is causing this trouble. Please remove it.

Thank you this worked!

> Did you add extra CSS code to place the icons to the site credit area?

Yes, I added code as I want my social media icons underneath the footer area in the site credit area. The code is the following:
.social-media-button-container {
position:relative;
top: 284px;
}

I appreciate all your help!

To fix the header bar issue in smaller screen, add this custom CSS code:


.site-header .col-md-4 {
  height: 70px;
}

@media only screen and (max-width:1024px) {
  
  .site-header.fixed {
    position: fixed !important; 
    height: 160px !important;
  }  
  
  .site-header.float-header {
    height: 150px !important; 
  }  
  
  .page-wrap {
    padding-top: 160px !important;
  }
  
}

For social icons, please remove it, and use Footer 3 widgets area in the Appearance > Widgets. So I’ll be easier to provide you with jQuery solution then.

Regards,
Kharis