Docs

[Andcom]

Hi,

Please help, I have added the 4 social media buttons at the bottom of my widget (class: soc1) and given the

.xcolumn `.x-column.x-md.x-1-2.x-1-2:first-child.x-1-3
{height: 400px;}`

a height of 400px to match the frame height.

How can I make the buttons sit at the bottom, so their inline vertical with the bottom of the map.

Thanks in advance.

[Andcom]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for writing in! But why are you adding this classes .xcolumn .x-column.x-md.x-1-2.x-1-2:first-child.x-1-3 on your columns? You can possible mess the columns with that. You can use a simpler class name instead like my-class or my-columns or contact-col and then use that class for your CSS.

e.g.

.my-class {
	height: 400px;
	position: relative;
}

Then you can add this custom CSS to bring the icons on the bottom of its column.

@media (min-width:  980px) {
	span.soc1 {
		position: absolute;
		bottom: 0;
	    width: 100%;
	}
}

This will not work, if you did not position: relative; the column.

Hope it helps, Cheers!

[Andcom]

Hi, it’s the widget box at the bottom, I used some Java script posted on another post to change the widget box sizes to 2/3 and 1/3.

How can I give it another name? I got the name from inspect element as attached. Otherwise it works great as needed. Thank you.

[Andcom]

This reply has been marked as private.

[Rue Nel]

Hello There,

Which name you’d like to change? The contact us text or the social icons? You can edit this by going to WP > Appearance > Widgets. Find the Footer Widget area and select the text widget.

Please let us know how it goes.

[Andcom]

Thanks for writing in! But why are you adding this classes .xcolumn .x-column.x-md.x-1-2.x-1-2:first-child.x-1-3 on your columns? You can possible mess the columns with that. You can use a simpler class name instead like my-class or my-columns or contact-col and then use that class for your CSS.

This, she says in the above post, I shouldn’t be using the class for the widget height! Saying is might mess it up. But it’s the class the theme has given the widget box right? So I assume I need to change that I guess for this instance?

[Paul R]

Hi,

The class x-1-2:first-child shouldn’t be there.

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[Friech]

Hi There,

This, she says in the above post, I shouldn’t be using the class for the widget height! Saying is might mess it up. But it’s the class the theme has given the widget box right? So I assume I need to change that I guess for this instance?

Thank you for the clarification and sorry it slip on my mind that it was the footer. The fact that the class x-1-3 (one-third) and x-1-2 (one-half) are applied on the same div does not make sense. Ok please update the JavaScript script code that you’re using to add the classes to this:

jQuery( document ).ready(function( $ ) {
 $("footer.x-colophon.top .x-column.x-md.x-1-2:first-child").toggleClass('one-third-column');
 $("footer.x-colophon.top .x-column.x-md.x-1-2.last").toggleClass('two-third-column');
});

And then use this custom CSS to style the footer like you do now but with the new classes (one-third-column and two-third-column).

@media (min-width:  980px) {
	.x-column.x-md.one-third-column {
	height: 400px;
	width: 30.66666%;
	position: relative;
	}
.x-column.x-md.two-third-column {width: 65.33332%;}
}

Actually you can combine it with the custom css for span.soc1 I’ve provided above.

@media (min-width:  980px) {
	.x-column.x-md.one-third-column {
	height: 400px;
	width: 30.66666%;
	position: relative;
	}
.x-column.x-md.two-third-column {width: 65.33332%;}
	span.soc1 {
		position: absolute;
		bottom: 0;
	    width: 100%;
	}
}

Hope it helps, Cheers!

[Author]

Posts