Issues with Icons Loading

We're encountering an issue with replicating the home page demo content of the Steakhouse template. Instead of the icons loading horizontally in a row properly like the demo site, our icons are loading vertically (see attached image).

Now, the icons do load properly in the "header" module position. However when the module position is changed to "top1" to get the background image to be full screen width, they load vertically.

I'm guessing that there is something within the module position settings that is controlling the way the icons load, however I'm unsure of how to resolve this.

Any help would be greatly appreciated!

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.

Hi

Now I see. This style is for header module position, so if possible please move this module there. If not, try recreate a style for top1 position by using this in css:

Code: Select all

/* Frontpage - header */
#gkTop1 {
   color: #fff;
   text-align: center;
}
#gkTop1 h1 {
   color: #fff;
   font-size: 76px;
   padding-top: 100px;
}
#gkTop1 h2 {
   color: #fff;
   font-size: 24px;
   float: none;
   font-weight: 300;
   margin: 0 auto!important;
   padding: 100px 0 80px 0;
   position: relative;
   width: 40%;
}
#gkTop1 h2:before {
   border-top: 1px solid #fff;
   content: "";
   left: 0;
   position: absolute;
   top: 50px;
   width: 100%;
}
#gkTop1 h2:after {
   background: #fff;
   content: "";
   height: 9px;
   left: 50%;
   margin: -4px 0 0 -9px;
   position: absolute;
   top: 50px;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   width: 9px;
}
#gkTop1 .btn {
   background: #fff;
   color: #000;
   display: inline-block;
   font-size: 14px;
   font-weight: bold;
   height: 55px;
   line-height: 56px;
   padding: 0 35px;
   text-transform: uppercase;
}
#gkTop1 .btn:active,
#gkTop1 .btn:focus,
#gkTop1 .btn:hover {
   background: #000;
   color: #fff;
}
#gkTop1 .gk-short-menu {
   margin: 350px 0 150px 0;
}
#gkTop1 .gk-short-menu li {
   display: inline-block;
   margin: 0 40px;
}
#gkTop1 .gk-short-menu a {
   color: #fff;
}
#gkTop1 .gk-short-menu a:active,
#gkTop1 .gk-short-menu a:focus,
#gkTop1 .gk-short-menu a:hover {
   color: rgba(255, 255, 255, .6);
}
#gkTop1 .gk-short-menu i {
   display: inline-block;
   font-size: 56px;
   line-height: 54px;
   margin: 0 auto;
}
#gkTop1 .gk-short-menu .gk-icon-dinner-set-solid {
   font-size: 64px;
   position: relative;
   top: 4px;
}
#gkTop1 .gk-short-menu .gk-icon-calendar-solid {
   font-size: 42px;
   position: relative;
   top: -4px;
}
#gkTop1 .gk-short-menu span {
   display: block;
   font-size: 14px;
   font-weight: 600;
}

@media (max-height: 1400px) {
   #gkTop1 .gk-short-menu { margin: 300px 0 150px 0; }   
   #gkTop1 > div > div { padding: 50px 0 40px 0; }
}
@media (max-height: 1300px) {
   #gkTop1 .gk-short-menu { margin: 250px 0 100px 0; }
   #gkTop1 h1 { padding-top: 50px; }
}
@media (max-height: 1200px) {
   #gkTop1 .gk-short-menu { margin: 150px 0 50px 0; }
   #gkTop1 h1 { padding-top: 30px; }
}
@media (max-height: 1100px) {
   #gkTop1 .gk-short-menu { margin: 130px 0 50px 0; }
   #gkTop1 h2 { padding: 80px 0 50px 0; }
}
@media (max-height: 1000px) {
   #gkTop1 .gk-short-menu { margin: 80px 0 50px 0; }
   #gkTop1 h2 { padding: 80px 0 30px 0; }
   #gkLogo.cssLogo { margin: 30px auto 0 auto; }
}
@media (max-height: 900px) {
   #gkLogo.cssLogo { height: 180px; }
}
@media (max-height: 800px) {
   #gkTop1 > div > div { padding: 0; }
   #gkTop1 .gk-short-menu { margin: 32px 0 50px 0; }
}
@media (max-height: 700px) {
   #gkTop1 h1 { font-size: 48px; }
   #gkTop1 h2:before,
   #gkTop1 h2:after { top: 16px; }
   #gkTop1 h2 { padding: 35px 0 25px 0; }
   #gkTop1 .gk-short-menu { margin: 20px 0 50px 0; }
   #gkTop1 .gk-short-menu li { display: inline-block; margin: 0 16px; }
}
@media (max-height: 600px) {
   #gkTop1 .gk-short-menu i {
      font-size: 24px!important;
      line-height: 24px!important;
   }
   #gkTop1 .btn {
      height: 40px;
      line-height: 40px;
      padding: 0 20px;
   }
   #gkTop1 h2 { font-size: 16px; }
   #gkLogo.cssLogo { height: 150px; }
}
@media (max-height: 500px) {
   #gkLogo.cssLogo { height: 120px; }
   #gkTop1 h1 { font-size: 32px; }
   #gkTop1 .gk-short-menu span {
      font-size: 12px;
      font-weight: 500;
   }
   #gkLogo.cssLogo { margin: 10px auto 0 auto; }
   #gkTop1 h2 { padding: 30px 0 20px 0; }
}


Hi,

Thanks for your help in reviewing the site, however I have another question. When I put that code into the template.css file, it doesn't seem to do anything (unless maybe the site is cached in my browser and it's just not loading properly). Was the template.css file the appropriate place to put this code?

We had the module originally set to the "header" position, and the buttons loaded up fine there. However, the background image was loading up cropped on the left and right sides and the parallax didn't seem to be working.

So it seems like it's either put it to the "header" position and have the background image crop weird, OR put it into the "top1" position where the background loads full screen like the demo, but the icon buttons load weird. Is this normal?

Thanks!

HI

Yes it's normal. Styles are dependable from the position since its completely different layout.

Please do not put this code to template.css file. It will be overwritten for sure. Use override.css instead just remember that override needs to be enabled in template settings in order to use it.

Thank you so much! I'll definitely move the css out of the template.css file and into the override.css file. The buttons seem to be loading up fine now - I guess the site must have been cached yesterday when I was working on it. Thank you again for all of your help!

Hi

No problem. Glad I could help