Pique theme: adjust column width without running content off sides

whitfrancene · Member · Mar 2, 2017 at 7:43 pm
Copy link

Add topic to favorites
I recently made my site “full width” (no spacing on left and right side like how the Pique theme defaults it since it is a fixed width theme) with the code below

.site {
max-width: none;
}

.pique-panel-background {
background-size: cover
}
.site-footer {
max-width: none;
}
#site-navigation.main-navigation.sticky {
max-width: none;
}

However, this isn’t translating into the mobile version as everything runs off the side and things are cut off.
https://cloudup.com/c3T6eyU0298

Also, the headers on my individual pages are “full width” but the pictures/feature images aren’t, so it’s leaving a large border around the photo (the larger the screen, the larger the border).
https://cloudup.com/czQrXEx9I0S

How do I get rid of the spacing on either side of my site, and fix the header issue without it messing up the mobile / tablet view? How do I configure the mobile / tablet view to have a max width / to not run content off the sides?

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Mar 3, 2017 at 3:25 am
Copy link
Hi there, except in rare instances, you would typically not set a max-width in a responsive designed theme to “none”. Go in and change all of those max-width: none declarations to
max-width: 100%;
and that should fix the problem for you.
whitfrancene · Member · Mar 3, 2017 at 4:24 pm
Copy link
Thank you, I think that worked. However, the headers on my individual pages are still “full width” but the pictures/feature images aren’t, so it’s leaving a large border around the photo (the larger the screen, the larger the border).

https://cloudup.com/czQrXEx9I0S

Can you please assist with that?
thesacredpath · Member · Mar 3, 2017 at 7:56 pm
Copy link
Hmmm, I’m still not understanding what you are wanting from looking at your screenshot. Can you possibly put an arrow or circle what you are talking about on the screenshot and the upload it again?
whitfrancene · Member · Mar 6, 2017 at 6:07 pm
Copy link
Oh my bad, I sent you the wrong screenshot!

Here you go, hopefully this clarifies to you what I’m looking for.

https://cloudup.com/il6asYfVqX8
https://cloudup.com/i2OElkO2H3w

See how my header image doesn’t span the full width of the header location? On bigger screens, the gap on the left and right of the image becomes bigger and bigger. I would like for my header image adjust on different screen sizes so that the viewer doesn’t see any gaps or awkward spaces.
thesacredpath · Member · Mar 7, 2017 at 12:42 am
Copy link
Many thanks for the new screenshots. Add the following to the very bottom of your custom CSS and test things out.
```
.pique-header img {
	max-width: auto;
	width: 100%;
}
.main-navigation {
	max-width: 100%;
}
```
whitfrancene · Member · Mar 7, 2017 at 4:10 pm
Copy link
That works great, thank you very much!

One more question about it:
Can you help me make the BLOG page header and my CONTACT page header thinner (about half the height that it is)? I know that it’s adjusting to different screen sizes now, which I like (and it looks fine on smaller screens) but it looks disproportionately huge on my wide screen (and my logo looks teeny tiny).

https://cloudup.com/cUBPyhhs5HN
https://cloudup.com/cfuRm49NIE8
thesacredpath · Member · Mar 7, 2017 at 4:57 pm
Copy link
Super!

On the header on other pages, add the following which uses the “not” pseudo selector to exclude the home page.
```
body.blog:not(.home) #masthead, body.page:not(.home) #masthead {
	max-height: 300px !important;
}
```
You can adjust my 300px value.
whitfrancene · Member · Mar 7, 2017 at 5:14 pm
Copy link
Oh okay, so do I just add this code to the end of my CSS customization? Or do I insert this inside the code you already you gave me?
```
.pique-header img {
	max-width: auto;
	width: 100%;
}

.main-navigation {
	max-width: 100%;
}
```
I don’t code so I’m not sure what to do with this. :) What should the whole thing look like?
thesacredpath · Member · Mar 7, 2017 at 11:30 pm
Copy link
Add that to your CSS at the very bottom.

No items found.