Non-responsive header/footer contents

So after fiddling a bit more with the theme, and after trying to move the logo and the social icons around a bit to get them to show where I want them to, I noticed that those were being placed where I wanted them to, but when I would use a different (lower) resolution, those icons would either dissappear or outside the bounds of the header. Same thing happens to the footer, even though I haven’t changed anything about it. Is it possible to disable the “responsiveness” of the content inside those two areas? Or at least prevent them from being placed haphazardly on smaller screens (like using position: absolute from whitin the header area).

Here’s the CSS code I used to position stuff:

#site-title a img {
    border: 0px none;
    position: relative;
    margin: -40px -10px -35px;
}

.hgroup-right {
    float: right;
    position: relative;
    margin-top: -1px;
    margin-right: -10px;
}

Please post your website URL for review.

Using a negative margin in most cases causes issues, so be careful with that. Or at least use CSS media queries to apply styling only on desktop. Or different media query for mobile and so on. Here is an example using your above give code.

@media (min-width: 768px) {
	#site-title a img {
	    border: 0px none;
	    position: relative;
	    margin: -40px -10px -35px;
	}

	.hgroup-right {
	    float: right;
	    position: relative;
	    margin-top: -1px;
	    margin-right: -10px;
	}
}

It’s en.stefansgallery.tk
I don’t know of any other way to display items the way I want them to except with those negative values.
But that fixed it, thanks! I noticed that all resolutions with width lower than 1060px positions the social icons and logo the wrong way, so I’ve set it to that

After a few more trials, noticed that any resolution below 768 pixels in width, causes the social icons to disappear. Any way to prevent this behaviour?

EDIT: Also setting an additional @media with a lower height than the main one (which I’ve set to 1060px) causes the buttons to be placed more to the left that intended.

Add this code to Appearance >> Theme Options >> Other >> Custom CSS. It will make social media icons appear the same way on mobile and desktop.

@media only screen and (max-width: 767px) {
  .hgroup-right .social-icons { 
    display: block;
    margin-top: 15px;
  }
}

@media only screen and (min-width: 300px) and (max-width: 767px) {
  .hgroup-right .social-icons { 
    display: block;
    margin-top: 0px;
  }
  .hgroup-right {
    margin-top: 0px;
  }
}

Using the code you provided doesn’t allow me to change the position of the buttons on the mobile resolutions. It still displays them where it wants to.

EDIT: Nevermind, I had to change the maximum width. Can’t believe I forgot that. Thanks!