page size, title placing

jamiemaxwell86 · Member · Jan 17, 2017 at 1:44 pm
Copy link

Add topic to favorites
Hello, I have just upgraded to premium and I would like to make some alterations to my site. 1) I’d like to reduce the size – in appearance not capacity – of the pages, so they are smaller on the screen. 2) I would like to add a title – ‘Jamie Maxwell – Writer and Editor’ – but at the top right hand corner of the page, an inch to the left of the ‘Menu’ tab, not in the middle of the header. I believe this can be done with some CSS stuff but I don’t know how to do it. Can you help? Thanks! Jamie

The blog I need help with is: (visible only to logged in users)
jamiemaxwell86 · Member · Jan 17, 2017 at 2:03 pm
Copy link
Actually, with regards to the title, the top left hand corner adjacent to the menu tab.
staff-loquaciousloon · Staff · Jan 25, 2017 at 4:57 pm
Copy link
Hi there!

It looks like you may have already addressed the width issue on your pages, but let me know if you’re still working on that.

For the title, the following CSS should shift the site title up and to the left – except on smaller screens where it will drop back down a little so it doesn’t overlap the menu :)
```
#hero-header {
    padding: 15vh 30px 5vh;
    position: relative;
}

.site-title {
    text-align: left;
}

@media screen and (min-width: 62em) {
#hero-header {
    padding: 15px 40px 33.2vh;
}
}
```
I did notice you have a style with
```
#hero-header {
	width: 785px;
}
```
defined in your custom CSS. I’d recommend using max-width instead of width – that’ll work better on mobile devices :)
jamiemaxwell86 · Member · Jan 25, 2017 at 8:57 pm
Copy link
Hi Chad – many thanks for your help. I’ve added max-width and it renders better on a mobile. Putting the placing of the title to one side, I’d still like to reduce the size of the header and the posts, so they look more like this > https://samkriss.com/ > in the middle of the page. That’s the main thing I’d like to do. The design is basically still too big. Thanks, Jamie
staff-loquaciousloon · Staff · Jan 26, 2017 at 5:38 pm
Copy link
My pleasure!

You already have a style in place that sets the width of your content area:
```
/**
 * Decrease site content width
 */
body.has-cover-image:not(.has-sidebar) .site-content,
body.has-header-image:not(.has-sidebar) .site-content {
	max-width: 860px;
}
```
You can change that to a lower number to make the content a narrower column down the center of the page.

You can do the same thing to the max-width that you have set under your style for #hero-header.

Try changing those to something like 700px or even 600px – however narrow you’d like them to be :)

Is that what you mean when you say it’s too big?
jamiemaxwell86 · Member · Jan 26, 2017 at 6:36 pm
Copy link
Hi Chad, thanks again. That’s not quite what I’m after. What I mean is that I’d like the content to sit further back on the screen. The site looks ideal when I zoom out from 100% to 75% on my Mac. Is there anyway I could upload some screenshots? That might help. On this site > https://samkriss.com/ > it’s not just the widths that are reduced but the font size and the header image too. Apologies for not explaining this better! Cheers, Jamie
staff-loquaciousloon · Staff · Jan 30, 2017 at 2:48 pm
Copy link
Okay, smaller font size – now I’m with you :)

You can reduce the font size like this:
```
body {
	font-size: 1em
}
```
You can also try .9em or .85em – fine tune it as needed :)

For your header image, you can adjust the size of the image itself in the style you’re already using:
```
#hero-header {
	max-width: 715px;
	margin: auto;
	margin-top: 40px;
}
```
Lower the max-width for a smaller image.

The size of the font on the title is controlled like this:
```
.wf-active #hero-header .site-title {
  font-size: 18px;	
}
```
(again, adjust as needed)

If you need to make the header image shorter than it is now, you’ll need to adjust some padding:
```
@media screen and (min-width: 62em) {
#hero-header {
    padding: 16.6vh 40px;
}
}
```
The vertical (top and bottom) is the 16.6vh – adjust that a bit and try out some different sizes if needed.

Some things to keep in mind:
– vh means Veiwport Height – the height of your header is influenced by the size of the screen your visitor is using, so adjust with according :)
– That style specifically targets larger screens, not mobile devices, generally speaking.
– That number is both the top and the bottom padding – so decreasing it will decrease the amount of pace both above and below your site’s title.
jamiemaxwell86 · Member · Jan 30, 2017 at 9:28 pm
Copy link
Ah that’s the one – thanks!

Is there anything that can be done about the menu tab on mobile? It overlaps with the page title. Would it be possible to shrink it a bit, or move it, or better yet replace it simply with two separate tabs ‘About’ and ‘Contact’ within the header image?

Thanks again, very helpful.
staff-loquaciousloon · Staff · Jan 30, 2017 at 10:51 pm
Copy link
Is there anything that can be done about the menu tab on mobile? It overlaps with the page title. Would it be possible to shrink it a bit, or move it, or better yet replace it simply with two separate tabs ‘About’ and ‘Contact’ within the header image?

Hm. We won’t be able to go with the separate tabs option, this theme isn’t built for that.

We can move the title down a little so they don’t collide.

This style should change the alignment, but only on smaller screens:
```
#hero-header {
    padding: 10vh 30px 3vh;
    position: relative;
}
```
It adds some padding on the top, while taking it away on the bottom, so the title shifts down but the image doesn’t get taller. Does that work? :)
jamiemaxwell86 · Member · Jan 31, 2017 at 9:39 am
Copy link
Yeah that works really well, many thanks.

Would it be possible to move the title back up a little? Is there a way to vary its placing?
jamiemaxwell86 · Member · Jan 31, 2017 at 11:22 am
Copy link
Ah it’s OK, think I worked it out. Cheers again for your help.
staff-loquaciousloon · Staff · Jan 31, 2017 at 2:13 pm
Copy link
You’re welcome! :)

No items found.