Formatting issues for mobile screens

Hi there...
Almost ready with the new website, and while it all looks good on a desktop/laptop screen, i'm not entirely satisfied with the formatting on mobile screens.
I'm listing below a few issues i'm facing, hope you will be able to guide me to solutions for these.

1. The Header
   In an earlier post, you had shared with me a modified header sample file which is what im using - static, narrow, sticky with social media icons to the right, just how i wanted it.
   http://support.semicolonweb.com/forums/topic/header-height/
   However on a mobile screen this does not work. The header is very tall when the page loads, and then when you scroll down it becomes small but the transition is not smooth like it should be. I'd just like it to remain one small size and not change at all. The way its working now on mobile screens is not right...this is happening on all the pages, how can i correct this ?
   Please use this link on a mobile - www.cosurvivor.in/newsite/index.html

2. Slider on the Homepage.
   www.cosurvivor.in/newsite/index.html
   Again, this looks great on a laptop. I have put in quite a few images on the slideshow, so when you open this on a mobile screen, the pagination dots at the bottom of the slide are very large and take up a lot of space at the bottom of the slide.
   Is there any way i can make these smaller, or make them not appear on a mobile?...or is it better to just remove them altogether?

3. Spacing in between sections.
   On a laptop or a desktop it all looks very nice and neat and well laid out. On a mobile screen it looks like a little too much spacing in between sections, too many empty spaces. Esp on the homepage below the slide show. Is there a way to reduce this?
   i understand you do not do customization so i wont list down all the specifics but if you could give me one example of how to make this adjustment, i could play around with the rest.

4. Also, too much space on all the pages between the last section and the footer.

5. Edge Spacing.
   Again, on a mobile, it seems like too much space/padding being left out from the edges of the screen.
   Particularly, if you look at this page on a mobile:
   http://www.cosurvivor.in/newsite/pages/galleries.html

For this page, please let me know...is it possible to have the 3 image thumbnails from edge to edge, no space at all. Just like how you see thumbnails in an instagram feed on the instagram app ?
that would make this perfect.

1. Footer Background Image
   I have put in a bg image in the footer, tyre treads on a road curving into the distance. Looks nice on a big screen, but on a narrow screen the footer text overlaps and it looks a little messy.
   Can we make this bg image disappear on mobiles?...or do i just have to remove it?

2. Post Grid Entry-Image
   http://www.cosurvivor.in/newsite/pages/destinations.html
   On a mobile, it should be covering the entire width of the container, just like the text. Or at least center aligned. Right now the entry images are left aligned and leave a lot of extra empty space to the right. Can i increase the display size of these images?

3. Entry-meta text entries in the above page dont seem properly aligned?

4. Iconlist spacing
   Example: http://www.cosurvivor.in/newsite/pages/destinations/enter-spiti-valley.html
   If you scroll down to the "Trip Highlights", the space between the icons (icon-caret-right) and the text is too much on a mobile screen.
   How can i reduce this spacing?

On this section, other sections on the page and other pages, if i could reduce the icon spacing, and the spacing from the screen edges then a lot of these text entries could all fit into one line making it all so much neater and well formatted on a mobile screen.
Again, i'm not asking customization, but if you could just point to the correct files and lines of code i need to change, would be a big help.

Thank you all once again.
Rohit

Please ignore #9 about the icon list spacing. I think i figured that one.