Widgets and footer

explorejudaism · Member · Oct 20, 2016 at 7:01 pm
Copy link

Add topic to favorites
Hello, I’d like a little customisation help please, mainly on the widget/footer area:

1) On smaller screens, when my widgets in the footer of the page are stacked, there is huge space between contact us and follow us. How do I decrease this?
(I think the reason for it is I have used a 2nd text widget (‘view more testimonials’) and have moved it above, so the site thinks there is still content in this bottom space).

2) When the footer widgets are next to each other on desktop, why is the right margin so much bigger for ‘follow us’ than ‘contact us’. I’d like them to be equal so both widgets are the same distance from the sides of the screen. How do I do this?

3) Is it possible to customise the wordpress information at the bottom as I would like it to feature the designers website and also other notes? If not, could I add another text footer widget which will always appear stacked and never next to my other widgets?

4) Finally, in my menu bar on desktop, how do I make the little arrow next to ‘packages’ turn grey like the rest of the text when hovered?

Thank you very much

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Oct 21, 2016 at 9:12 pm
Copy link
For #1, the text widget we’ve used for the testimonials view more link is what is causing the issue.

Add this to your max-width: 767px media query
```
#wpcom_social_media_icons_widget-3 {
	position: relative;
	top: -120px !important;
}
```
and add this to your max-width: 1019px query (not the one with the min-width: 600px)
```
#wpcom_social_media_icons_widget-3 {
	position: relative;
	top: -30px;
}
```
For #2, there are 3 widget areas in the footer, and the software adjusts them to all be about 1/3 of the overall width. Since the Follow Us widget content is very narrow, it has a lot of space to the right since the content is left aligned. The following is sort of a “hack”, but see if this will work for you. Add this to your min-width: 1020px media query.
```
#wpcom_social_media_icons_widget-3 {
	text-align: right;
}
```
For #3, add the following and you can edit the content text string.
```
.site-info:after {
	content: "My added text";
	float: right;
}
```
For #4, add this to the bottom of your custom CSS, which tells that down arrow to inherit the color from its parent (the menu item).
explorejudaism · Member · Oct 24, 2016 at 10:24 pm
Copy link
Hello thank you for helping me on this. A couple of small things:
3) I’ve placed by added text before the wordpress info as i didn’t like how it was misaligned on some screen sizes when on the left. As you can see it says “..designed by livlev.com |Powered by wordpress…”
a) Can i add a space so it reads “…| Powered…” at the moment it doesn’t seem to be recognising the space i put in.
b) i would like livlev.com to link out to the website http://www.livlev.com. How do I do this?

4) I can’t see the code you have written for this above.

Thank you so much
explorejudaism · Member · Oct 24, 2016 at 10:28 pm
Copy link
In addition to #3 above, how do I decrease the height of the footer with the site info? At 767px screen size and below the footer is longer than it needs to be.

(Please still answer my questions above this aswell) Thank you again :-)
thesacredpath · Member · Oct 25, 2016 at 11:33 pm
Copy link
Oops, on #4 I see you have that, but as for the space, remove the float: left; from the following CSS rule and the space will be rendered. Not sure why it is doing that.
```
.site-info::before {
    content: "Explore Judaism © 2016 | Website designed by livlev.com | ";
}
```
thesacredpath · Member · Oct 25, 2016 at 11:34 pm
Copy link
I see you have adjusted the top and bottom padding and font size for the site info section with the following CSS.
```
.site-info {
    font-size: 80%;
    padding-bottom: 10px;
    padding-top: 10px;
}
```
explorejudaism · Member · Oct 27, 2016 at 10:35 am
Copy link
Thank you.
3 last things:

1) In the site footer i would like livlev.com to link out to the website http://www.livlev.com. How do I do this?

2) At 767px and below, the height of the site-info is far longer than it needs to be but when i try to change it, it seems to be linked to the widgets above. How do I decrease the height of the site info?

3) In my menu bar on desktop, how do I make the little arrow next to ‘packages’ turn grey like the rest of the text when hovered?

Thank you very much, so nearly done!
thesacredpath · Member · Oct 27, 2016 at 8:41 pm
Copy link
1) In the site footer i would like livlev.com to link out to the website http://www.livlev.com. How do I do this?

With CSS, we cannot link text. CSS is a styling document used by the browsers to position and style the different elements of a web page.

2) At 767px and below, the height of the site-info is far longer than it needs to be but when i try to change it, it seems to be linked to the widgets above. How do I decrease the height of the site info?

This is a bit of a house of cards. Replace the 767px media query you have with the following. In my testing this works, but make sure and view on phone and table and on your computer at various window widths to make sure I haven’t missed something.
```
@media screen and (max-width: 767px) {
	#text-18 {
		position:relative;
		bottom:300px;
		padding-top: 128px;
		margin-bottom: -50px;
	}
	#wpcom_social_media_icons_widget-3 {
		position:relative;
		top:-60px !important
	}
	div#tertiary.footer-widget-area {
		height:270px
	}
}
```
3) In my menu bar on desktop, how do I make the little arrow next to ‘packages’ turn grey like the rest of the text when hovered?

In your custom CSS, find the following CSS rule and change the color to “inherit” and all should be good.
```
li#menu-item-116.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-has-children.menu-item-116::before {
    color: inherit;
}
```

No items found.