Home page – how to customize margins and footer

Hello!

First, the answer to your 3rd question: every change you make to a theme, it is most likely that you will lose it when you update the theme or WordPress, because WordPress has no way to recognize your modifications.

1.) To decrease the space between the menu bar and the middle ‘Welcome to our website’ part, you need to use this CSS rule:

.front-page #wrapper {
  margin: 20px auto;
}

Change the 20px value to your needs, but notice that the bottom margin (between the welcome box and the 3 boxes) wont change with this. To change that, you should create this rule:

#featured {
  margin-bottom: 5px;
}

and adjust the 5px value.

2.) The cause that your footer is in two lines is that there is a div for social icons. So in order to make that work, you have to edit footer.php. Now, the proper way for this is to create the child theme, copy the footer.php file from the parent folder to the child theme’s folder, and edit there. Open the file and find this:

</div>
	<!-- end of col-540 -->

	<div class="grid col-380 fit">
		<?php

		// First let's check if any of this was set

		echo '<ul class="social-icons">';

After the end of col-540 line delete the everything until the end of col-380 fit here:

</div>
	<!-- end of col-380 fit -->

</div>
<!-- end of col-940 -->

So the first line you have to delete is the <div class="grid col-380 fit"> (for me it is on line 58) and the last line you have to delete is <!-- end of col-380 fit -->. That should move up a little bit the copyright part. There may be necessary some CSS tweaking, but I can provide you that if you have deleted the div in the php file, because for some reason the footer menu is not appearing on my test installation, so your site will behave different from mine. Please let me know when you have made these modifications, and I can provide you the rest then.

I hope this helps.

Greetings,
Balint

Balint,
Thanks for replying so quickly! After working on my front page some more, I decided to delete the entire footer as it was. I found a Footer Copyright widget and a Trademarks widget that I really liked so I’m going to stick with those. Another question about margins – need the code please:
1) Want to reduce the white space a bit below the contact me button and photo.
2) Want to reduce the blue space between the 3 home widgets and the trademarks.
3) Want to reduce blue space between the trademarks and the copyright footer?

I looked in the css styles file and I can’t seem to figure out which code it is. Is there a document that explains in detail what code does what exactly where?

Cheers,
Oksana

Hello!

Sorry for my late reply. Here you go:

1)

#featured {
  padding-bottom: 40px;
}

Just adjust the padding-bottom value, which is currently 40px

3)
This will affect the spacing both between the logos and footer, and the 3 widgets and the logo, so first apply this, and if you need more adjustment for the 2), than see the 2) part. So the code is:

.widget-wrapper {
  margin: 0 0 20px;
}

Here you should reduce the 20px value.

2) This is a bit more complicated, but nothing dangerous. You can reduce the space to a certain point with this:

.front-page #wrapper {
  margin: 20px auto 0;
}

Here the 0 value is reducing the space, you should not change this. If you need to reduce the space more than this, then use this rule also (so use both rules):

#home_widget_1, #home_widget_2, #home_widget_3 {
  margin-bottom: 20px;
}

And here you can reduce the 20px value.

I hope this helps, if you need any more help, I am here ??

Greetings,
Balint

Sorry, we do not monitor these forums, please use the official forum:

https://cyberchimps.com/forum/free/responsive/

Thanks