Joomla Templates Club 406,261 posts

[ggarciap Friend ggarciapJoin date: January 2016Posts: 6Downloads:23Uploads:4 Thanks: 1]

#890121

As much as I try, the circular buttons departments is always aligned to the left . I managed to get on the average resolution keep in the center, but widened the page turn left.

Thanks.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#890129

Hi
kindly add a screenshot of the issue and post your site url here , the site url u submitted for staff is using a different non JA template .

[ggarciap Friend ggarciapJoin date: January 2016Posts: 6Downloads:23Uploads:4 Thanks: 1]

#890132

We are making changes and is not yet public.

It is centered when the window is slightly stretched.
http://imgur.com/ioUy2hX

And the buttons are moved to the left when more widens the window.
http://imgur.com/Wsc2Cvm

So I have the setting in template.css

.department-list ul.department-list {
  display: block;
  float: center;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 992px) {
  .department-list ul.department-list {
    text-align: center;
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .department-list ul.department-list {
    margin: 0 -10px;
  }
}
.department-list ul.department-list li {
  background: none;
  display: inline-block;
  float: none;
  height: 110px;
  margin: 0 0 10px;
  padding: 0;
  position: relative;
  text-align: center;
  width: 120px;
}
@media screen and (min-width: 992px) {
  .department-list ul.department-list li {
    display: block;
    float: left;
    margin-bottom: 0;
  }
}
.department-list ul.department-list li a {
  background: #f7f5e9;
  border-radius: 50%;
  color: #494949;
  display: block;
  height: 90px;
  margin: 0 auto;
  position: relative;
  text-indent: -999em;
  width: 90px;
}
.department-list ul.department-list li a:before {
  font-family: FontAwesome;
  font-size: 30px;
  left: 50%;
  margin: -17% 0 0 -15%;
  position: absolute;
  text-indent: 0;
  top: 50%;
}
.department-list ul.department-list li a:hover,
.department-list ul.department-list li a:active,
.department-list ul.department-list li a:focus {
  color: #ffffff;
}
.department-list ul.department-list li span {
  bottom: 0px;
  display: none;
  font-size: 14px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: bold;
  left: 0;
  padding-top: 5px;
  position: absolute;
  text-align: center;
  width: 100%;
}
.department-list ul.department-list li:hover span {
  display: block;
}
.department-list ul.department-list li.icon-1 a:before {
  content: "\f0f5";
}
.department-list ul.department-list li.icon-1 a:hover,
.department-list ul.department-list li.icon-1 a:active,
.department-list ul.department-list li.icon-1 a:focus {
  background: #d2644e;
}
.department-list ul.department-list li.icon-2 a:before {
  content: "\f0c2";
}
.department-list ul.department-list li.icon-2 a:hover,
.department-list ul.department-list li.icon-2 a:active,
.department-list ul.department-list li.icon-2 a:focus {
  background: #eda89a;
}
.department-list ul.department-list li.icon-3 a:before {
  content: "\f073";
}
.department-list ul.department-list li.icon-3 a:hover,
.department-list ul.department-list li.icon-3 a:active,
.department-list ul.department-list li.icon-3 a:focus {
  background: #a6d4dd;
}
.department-list ul.department-list li.icon-4 a:before {
  content: "\f0e0";
}
.department-list ul.department-list li.icon-4 a:hover,
.department-list ul.department-list li.icon-4 a:active,
.department-list ul.department-list li.icon-4 a:focus {
  background: #d8c3a0;
}
.department-list ul.department-list li.icon-5 a:before {
  content: "\f02d";
}
.department-list ul.department-list li.icon-5 a:hover,
.department-list ul.department-list li.icon-5 a:active,
.department-list ul.department-list li.icon-5 a:focus {
  background: #9abb90;
}
.department-list ul.department-list li.icon-6 a:before {
  content: "\f0f6";
}
.department-list ul.department-list li.icon-6 a:hover,
.department-list ul.department-list li.icon-6 a:active,
.department-list ul.department-list li.icon-6 a:focus {
  background: #b4b4b4;
}
.department-list ul.department-list li.icon-7 a:before {
  content: "\f0c0";
}
.department-list ul.department-list li.icon-7 a:hover,
.department-list ul.department-list li.icon-7 a:active,
.department-list ul.department-list li.icon-7 a:focus {
  background: #cea4b9;
}
.department-list ul.department-list li.icon-8 a:before {
  content: "\f0ac";
}
.department-list ul.department-list li.icon-8 a:hover,
.department-list ul.department-list li.icon-8 a:active,
.department-list ul.department-list li.icon-8 a:focus {
  background: #7ac2c5;
}

---

Attachments:

1. 
2. 

[ggarciap Friend ggarciapJoin date: January 2016Posts: 6Downloads:23Uploads:4 Thanks: 1]

#890174

When the screen is enlarged over the content it goes to the left.

I can give a password to joomla to what you may see better. But not how to do it privately .

---

Attachments:

1. 
2. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#890201

Hi
You can send details via Private reply (Set as private reply option) when u post a reply .

[Author]

Posts