Docs

[nikiniki9doors]

Hi guys,

I’m trying to create the following footer but am having trouble.

I’d like on non-mobile versions to have the full footer but then mobile versions to only show certain parts of the footer.

Full Non-Mobile Version:

Mobile Version:

Can you please advise me on how to create this?

website: http://www.curatedlisbon.com

Thanks

[Christopher]

Hi there,

You have to add subscribe form to the last section of each page. Please enable footer widget areas from Customize -> Footer. If you wish to hide some footer widget areas on mobile we’ll help you with that.

Hope it helps.

[nikiniki9doors]

Ok so the top part has to be part of the page and not the footer?

Also:

1. How do I remove the line or change the colour of the line above the copyright bottom footer?
2. How do I change the fonts (size, colour, hover colour?)
3. To achieve the look I want for each widget do I need to create a custom HTML and use inline css?
4. How do I create the last widget with the buttons and make it responsive? On some screens it could be 260px on desktop but as soon as it goes to mobile it needs to be full width with 20px on each side.

[Thai]

Hi There,

Please add the following CSS:

.x-colophon.bottom {
    border-top: 1px solid #272424;
    box-shadow: none;
}
.x-colophon.bottom .x-colophon-content {
    font-size: 14px !important;
    color: #695757;
}
.x-colophon.bottom .x-colophon-content a {
    color: #695757;
}
.x-colophon.bottom .x-colophon-content a:hover {
    color: #dcc9c9;
}

Hope it helps 🙂

[nikiniki9doors]

Hey Thai, didnt realise youd respond so quickly I added a couple more questions above could you take a look?

For some reason there is double text – its hard to see but if you zoom in you can see it. It causes visual disturbance.

I think maybe my code needs to be cleaned up somewhere? can you take a look?

.x-colophon {
background-color: black;
}

.site .x-colophon.top,
.site .x-colophon.top a,
.site .x-colophon.bottom,
.site .x-colophon.bottom a {
  color: #FFF;
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 3.3px;
  line-height: 1.7em;
  text-transform: uppercase;
}

.site .x-colophon.top {
	padding: 70px 20px 50px 20px !important;	
}

.site .x-colophon.top a:hover {
	color: #C59F73;
	font-family: 'Lato', sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 3.3px;
	line-height: 2.5em;
	text-transform: uppercase;
}

.site .x-colophon.top h4 {
	color: #ffffff;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 3.3px;
	line-height: 2.5em;
	text-transform: uppercase;
}

footer.x-colophon.bottom .x-colophon-content {
    font-size: 8px !important;
    margin-top: 2px !important;
}

.x-colophon.bottom {
    border-top: 1px solid #000;
    box-shadow: none;
    padding: 0px 20px 0px 20px !important;
}

.x-colophon.bottom .x-colophon-content a {
    color: #fff;
}
.x-colophon.bottom .x-colophon-content a:hover {
    color: #C59F73;
}

[Rue Nel]

Hello There,

Thanks for the updates! The double text is a text shadow. Please have the code updated and use this instead:

.x-colophon {
   background-color: black;
}

.site .x-colophon.top,
.site .x-colophon.top a,
.site .x-colophon.bottom,
.site .x-colophon.bottom a {
  color: #FFF;
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 3.3px;
  line-height: 1.7em;
  text-transform: uppercase;
  text-shadow: none;
}

.site .x-colophon.top {
	padding: 70px 20px 50px 20px !important;	
}

.site .x-colophon.top a:hover {
	color: #C59F73;
	font-family: 'Lato', sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 3.3px;
	line-height: 2.5em;
	text-transform: uppercase;
}

.site .x-colophon.top h4 {
	color: #ffffff;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 3.3px;
	line-height: 2.5em;
	text-transform: uppercase;
}

footer.x-colophon.bottom .x-colophon-content {
    font-size: 8px !important;
    margin-top: 2px !important;
}

.x-colophon.bottom {
    border-top: 1px solid #000;
    box-shadow: none;
    padding: 0px 20px 0px 20px !important;
}

.x-colophon.bottom .x-colophon-content a {
    color: #fff;
}
.x-colophon.bottom .x-colophon-content a:hover {
    color: #C59F73;
}

Please let us know how it goes.

[nikiniki9doors]

Nope that didnt work. I cleared cache. I added !important to the css – still there.

[Friech]

Hi There,

Add this to your custom CSS on Customizer to remove the text-shadow.

.widget {
	text-shadow: none !important;
}

Please clear your caching plugin (W3 Total Cache) and your browser’s cache after updating the CSS.

Thanks.

[Author]

Posts