Smartphone Formatting

I am using the Photo template at [url]CityHallWedding.Photography[/url]. Since this is a responsive template, I assumed it would format well on a smartphone. Instead, it is a not-so-good, squished version of the web page. The worst aspect is that the footer takes over most of the screen. But there are other things I also want to address.

My question is this: can you point me to some documentation as to how to set this up correctly? I have looked for something to read and cannot find the correct info.

Hi

Just write down what you would like to change and I'll try to help.

OK.

First up is the module "social icons" that is assigned to the "social" position. When I look at the home page in a Chrome browser on a Mac, it appears to be about an inch in height, taking up more real estate than it should for such small icons. When I look at it in Explorer on a Windows platform, it is even larger, perhaps 2 inches in height. When I look at the home page on an iPhone 5s, in horizontal mode, it takes over 1/3 of the screen preventing anything from being seen.

How can I fix these so that they look correct. Perhaps the ideal solution would be to display the social module position as possibly 2x the height of the icons when seen on a computer, and maybe not at all when on a smartphone. Also, is there an Explorer fix so that it does deviate from how Chrome displays it?

Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all

@media only screen and (max-width:640px) {
#gk-social a:before {
    display: block;
    font-size: 20px;
    line-height: 25px;
    margin: 0 0 10px;
}

#gk-social a:before {
    font-size: 25px;
    line-height: 25px;
}

#gk-footer {
    display: none;
}

#page-nav.active #gk-social,
#page-nav.active .gk-logo-text {
    margin-top: 0;
}
}