Spacing text/ mobile

lukeboat · Member · Sep 27, 2016 at 12:39 pm
Copy link

Add topic to favorites
Hello.. i’m trying to space the text on the ‘home’ page of my site (using the Pique theme) so it doesn’t get covered by the menu bar and also is centred on the page. I’m also trying to get it to appear in the same place in all mobile formats!

Unrelatedly it would be great to change the footer colour so it appears without a border like it does if i use
#tertiary {
background-color: colour ;
}

I’m pretty new at this so would appreciate any help that could be given!

Thanks!

The blog I need help with is: (visible only to logged in users)
hallluke · Member · Sep 27, 2016 at 9:28 pm
Copy link
You can get rid of the border line in the footer with:
```
#tertiary {
	border: none;
}
```
Some of your current code isn’t doing anything. The @media rule you have is set to apply to footer widgets that don’t currently seem to be activated and the code you posted above is invalid (you need to switch colour for an actual colour).

If you replace what you currently have with the following it will avoid any redundant code and stop the overlap issue too:
```
#tertiary .widget-area {
	text-align: center;
}
.site-logo-link .site-logo {
	min-height: 200px;
}
.pique-panel, #masthead {
	background-color: #fff;
}
.main-navigation ul {
	background-color: #000;
}
```
One other thing: if you’re changing your background to white it would be good to change the font colour to something darker as it might be hard to read just going by the text shadow. Try something like this (but not red, that’s just to make it stand out!)
```
.pique-panel-content {
	color: #f00;
}
```
hallluke · Member · Sep 27, 2016 at 9:30 pm
Copy link
P.S. I’m local to East London and I love cakes and cycling, let me know once the site is “officially” launched so I can check it out!
lukeboat · Member · Sep 28, 2016 at 8:23 am
Copy link
Awesome, thank you! The border doesn’t seem to disappear with that code though.. it’s still there in a dark grey. Also as soon as I switch to mobile the logo squashes. Any ideas?

Good to know you’re local to East London.. I have a few test bakes floating around!
hallluke · Member · Sep 30, 2016 at 5:51 pm
Copy link
Here’s how to change the background colour for the footer section:
```
#colophon {
  background-color: #000;
}
.site-footer::before {
  display: none;
}
```
There’s a semi-transparent overlay in there which is causing problems if you set the colour with the code you tried previously, this will take care of it.

To stop the header image getting squished you can either target some code to mobiles only to make it appear slightly smaller:
```
@media screen and (max-width: 360px) {
	.site-logo-link .site-logo {
		min-height: 150px;
	}
}
```
Or you could try editing the image as I notice it has quite a lot of empty space on either side – get rid of that then re-upload the image and it should help out too.

No items found.