Margins for Full Width


#1

Hello!

Love the theme, however was wondering how I could make the margins less for the full width sections? So for the services section/ exployees section etc? Is there a way to make the margins on the sides less so it shows more data?

I would love to be able to show all 4 of our employees on one line

http://timeplacetest.azurewebsites.net/

Thank you!


#2

Hello,

It’s not a question of margins, but a question of width and number of columns.

You would need to go to /widgets/fp-employees and find col-md-4 and replace it with col-md-3. This will switch the employees section from 3 columns to 4 columns so this way you don’t need to modify the section width.

Also, you would need to add this to a custom CSS plugin to stop clearing of the fourth element:


.employee:nth-of-type(3n+1) {
   clear: none;
}

Let me know if you find the columns too small and we’ll see about increasing the width of that section.


#3

Hello,

That worked perfectly! Thank you!

I still would like smaller margins for the site in general. Not a top priority but if it’s not too complicated I would love to know how that would work.


#4

Hello,

It’s easy actually. Place this default code in your custom CSS plugin:


@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

So, for a screen width greater than 1200px, the width of the container is 1170px. Same thing for the other two. Change container widths as you see fit. Margins are auto so don’t worry about them, they just take the remaining space from screen width - container width.


#5

Thank you!! Exactly what i needed