Edits in Pique Theme

elizabethturski · Member · Jul 21, 2016 at 1:52 pm
Copy link

Add topic to favorites
Hello,
I am setting up my personal website, and am using the Pique theme. I run into a few issues that I cannot figure out the CSS fixes for:
1. I’d like the front page to be full screen so that you have to scroll down to see the first panel. I figured out the width, but cannot seem to find code for the height.
2. I’d like to edit the height of the panels, specifically panel one so that there is not so much white space around the content.
3. I’d like to edit a specific page (https://elizabethturski.com/portfolio): I’d like to change the background color on the header, and center the gallery

Any help would be greatly appreciated!

The blog I need help with is: (visible only to logged in users)
hallluke · Member · Jul 21, 2016 at 3:37 pm
Copy link
Hi Liz,

You can make the hero panel take up the whole viewport with the following code, you’ll probably want to target it just to larger screens though with media queries – at the moment your layout goes a bit crazy for tablets and mobiles so it’s tough to know what look you’re going for and make a suggestion.
```
#pique-hero {
  min-height:100vh;
}
```
If you manage to fix or remove the code that’s causing the current issues I can give you a better idea of how to set this to only affect desktop screen sizes – it’ll probably be something like the code below.

To reduce the space around the first panel you can remove some of the padding with CSS like this, which does only affect larger screens:
```
@media screen and (min-width: 768px) {
  .pique-panel-content {
    padding:0 40px;
  }
}
```
But you also have some empty paragraph tags, one before and one after your table, go into the editor and remove the bits that look like the following:

<p> </p>

You can change the portfolio header background colour with this code:
```
body.page-id-156 #masthead {
	background-color: #f00;
}
```
Although that shows up the navigation menu that you haven’t quite fully hidden. To get rid of it completely, remove this code:
```
.main-navigation li {
	display:none
}
```
and replace it with this:
```
#site-navigation-wrapper {
	display: none;
}
```
hallluke · Member · Jul 21, 2016 at 3:39 pm
Copy link
Oops, the paragraph example didn’t work as the forum strips out the HTML entity. It will look like this image instead.
elizabethturski · Member · Jul 21, 2016 at 6:07 pm
Copy link
Thanks for your help!

The only code that didn’t seem to work was the one for the panel size.

In regards the mobile layout, I’ve been having trouble with the @media query. Every time I use it for some reason the desktop view is also affected, especially when I try to make the mobile font smaller.

When making these changes I came across one more that I couldn’t solve:
On https://elizabethturski.com/portfolio I hid the entry title, but would like to put it in the header instead of the site title. Any suggestions?

Thanks!
hallluke · Member · Jul 21, 2016 at 6:40 pm
Copy link
You don’t currently have the code I gave you to adjust the panel 1 padding in your CSS, did you take it out again? It works for me so try adding it right at the very bottom of your existing code. It is set to only affect desktop screens so you’ll need to check on a monitor from 768px and upwards (it won’t change on phones and small tablets by design).

As for changing fonts for the mobile viewers I’d suggest going about it in the opposite direction. The theme is already responsive and by default it looks pretty smart on mobiles. So instead try applying your significant layout changes to just larger screens, where you have more space to make use of. For example change your title size code to this instead:
```
@media screen and (min-width: 768px) {
	#masthead .site-title {
		font-size:150px
	}
}
```
and then see how it reduces to a smaller size so that mobile and tablet viewers still get a good viewing experience.

It’s probably possible to switch around the styling of the site title and page title for your portfolio but it would be a bit messy and complicated. I wouldn’t recommend it for another reason though: having the same header on each page gives your site a consistent, professional look and helps establish a unique identity that runs across every single page. You probably already know this stuff from your marketing experience but it really helps make your site a cohesive whole. Let me know if you’re dead set on the change though and I’ll have another look.

No items found.