Some issues while adding your own CSS code

A professionally designed template for photographers and architects
GK User
Thu Dec 11, 2014 3:07 pm
Hi.
It would be great to have your contribution on some css code, in order to fix some issues on using this template.

The following custom code I applied to the template in my site works, but not flawlessly in all parts of the template. For example portfolios and responsiveness are not working good. Could you please check for mistakes or any other possible issues in order to work good in all parts of the template?

Thank you in advance.

Code: Select all
#page-nav {
      height: 30px;
}

#gk-menu-button > strong {
         top: 13px;
   }

#gk-menu-button > span {
   line-height: 33px;
   }

#gk-menu-button > span:before {
      height: 33px;
   }

#gk-menu-button {
   height: 30px;
   top: -30px;
}
.gk-logo-text {
   margin: 0px 0;
}

#gk-social,
#gk-logo-text {
   margin-top: -25px;
}
#gk-footer {
   margin-top: -59px;
   margin-right: 150px;
}

#gk-copyrights {
      margin-top: -15px;      
}

#gk-style-area {
   margin-left: 30px;
}

User avatar
Senior Boarder

teitbite
Sun Dec 14, 2014 10:13 pm
Could you please provide me with a URL to your website, either here or via PM (click the “Private Message” text underneath my avatar) so that I may analyze it? It is a lot easier for us to diagnose issues when we have a live site to examine.
User avatar
Moderator

GK User
Mon Dec 15, 2014 9:35 am
Thank you for your reply.
Details sent via pm.
User avatar
Senior Boarder

teitbite
Mon Dec 15, 2014 6:33 pm
Hi

Look ok. The only problem is that when You go to mobile new files come after this one and You loose the styling. Just use !important rule and it will be alright:

Code: Select all
#page-nav {
      height: 30px !important;
}

#gk-menu-button > strong {
         top: 13px !important;
   }

#gk-menu-button > span {
   line-height: 33px !important;
   }

#gk-menu-button > span:before {
      height: 33px !important;
   }

#gk-menu-button {
   height: 30px !important;
   top: -30px !important;
}
.gk-logo-text {
   margin: 0px 0 !important;
}

#gk-social,
#gk-logo-text {
   margin-top: -25px !important;
}
#gk-footer {
   margin-top: -59px !important;
   margin-right: 150px !important;
}

#gk-copyrights {
      margin-top: -15px !important;     
}

#gk-style-area {
   margin-left: 30px !important;
}
User avatar
Moderator

GK User
Mon Dec 15, 2014 8:38 pm
Thank you for your reply

I've partially used the !important rule and had not the desired results.
However I did not try it in all the custom entries.

I will test it as per your instructions and I will revert with my comments.
User avatar
Senior Boarder

teitbite
Thu Dec 18, 2014 4:41 pm
Hi

Ok. Just let me know when You'll test it. I'll be waiting.
User avatar
Moderator

GK User
Tue Dec 23, 2014 2:43 pm
Hi.
It generally works ok with the !important rule applied in all entries. Thank you.

However, in mobile view the background of the menu does not cover all the screen.
Any solutions on this point?

Image
User avatar
Senior Boarder

teitbite
Sat Dec 27, 2014 11:17 am
Hi

please try add this to css:

Code: Select all
#page-nav.active + #overlay-menu-content.active {
    bottom: 0 !important;
}
User avatar
Moderator

GK User
Sat Jan 03, 2015 10:18 am
Yeap, this works.
Thank you!

Happy New Year!
User avatar
Senior Boarder

teitbite
Sun Jan 04, 2015 10:56 am
Hi

Thank You. Happy New Year to You as well. Happy I could help :)
User avatar
Moderator


cron