Home Page Widgets

[DenisK]

Good evening Bill,

I am placing different widgets on my home page, lets say i want to add weather widget 3 different cities, but when i place them they are not in line and one goes below another one.

How can place all three in line ?

Thank you.

[Bill Robbins]

Good Morning Denis,

Great question there. The widgets in the home page template are made to be full width. You can change that if you need to. Here’s how:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   @media only screen and (min-width: 768px) {
   
   	#home-one .widget {
   		width: 31%;
   		float: left;
   		margin-left: 1%;
   		margin-right: 1%;
   	}
   
   }
   

   Just replace the one in the #home-one with the number of the section where you’d like to make the widgets smaller.

3. Update your settings.

That should do it. Let me know if you have any questions.

Have a great day,
Bill

[DenisK]

Good Morning Bill,

This is what I get. I want these weather icons to be in one line 🙂

Please let me know what I am doing wrong.

Thank you.

[Bill Robbins]

Hey Denis,

It looks like you’ve set up the code to use the fifth home widget area, but the one of the weather widgets is in the first one, and the other is in the second one. Try adding both of those widgets to the fifth one and see how that goes for you.

Bill

[DenisK]

It does look better but not in one line ?

Thank you.

[Bill Robbins]

We’re close. It’s home-two, not home-2. Change the entire snippet to be like this:

@media only screen and (min-width: 768px) {

	#home-two .widget {
		width: 31%;
		float: left;
		margin-left: 1%;
		margin-right: 1%;
	}
}

Don’t forget that last closing } or it may cause trouble for any other styles you add in the future.

See how that goes,
Bill

[DenisK]

works much better Bill thank you )

How do i bring home two closer to home one, there is a little gap there ?

Thank you.

[Bill Robbins]

The home page template is generally expected to use a format other than the standard one. When a standard format is used, there is a top margin added to the wrap class to keep the content from appearing under the header. Since you’re not using the hero section, we’ll need to remove that margin. Add this to your Custom CSS to do that:

.home .wrap {
	margin-top: 0;
	overflow: hidden;
}

Bill

[DenisK]

Bill I am your loyal customer for life. Your support is simply amazing.

Thank you again and have a great day.

[Bill Robbins]

Thank you Denis 🙂

Enjoy your day too

[Author]

Posts