Header / links / old posts!

cameraxviscera · Member · Jul 22, 2015 at 7:20 am
Copy link

Add topic to favorites
Hello!

Everyone has been super helpful every time I’ve had any questions, and my site keeps looking/functioning better more and more with your assistance, so thank you!

Three questions to go along with this picture:

(I assume these are all solvable with CSS)

1. How do I make the green header stretch across the entire page? Right now it is boxed in (within the center feed) but I’d prefer it went directly across the whole page, side to side.

2. Is there a way to center my menu links (articles, reviews, etc.) a little more? Currently they feed from the left, but centered would be better.

3. With “recent articles”, is there a way to get the title and date/comments NEXT to the picture rather than underneath it? If that requires converting the rectangular pic to a square pic, so be it. Again, I think it’d be a little less bulky and more visually appealing to have a square pic with the info to the right of it.

Hope this isn’t too much of a pain! Thank you so much in advance!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jul 22, 2015 at 5:21 pm
Copy link
Hi there,

1. How do I make the green header stretch across the entire page? Right now it is boxed in (within the center feed) but I’d prefer it went directly across the whole page, side to side.

Due to the fact that Oxygen is a responsive design that adjusts to all screen/window widths, and the structure of the HTML/CSS, this can’t be done cleanly. We would have to use position: absolute to make it span the entire width of the browser window which means it loses its relationship with the other page elements, so you would have a lot of issues with spacing at the top of the page.

2. Is there a way to center my menu links (articles, reviews, etc.) a little more? Currently they feed from the left, but centered would be better.

Add the following Media Query, which will center the menu down to about 600px in screen/window width, which is when the menu switches to the touch device menu. One other think I will note is that the centering goes away when the menu goes to two lines.
```
@media screen and (min-width: 600px) {
	.main-navigation {
		text-align: center;
	}
	.main-navigation ul {
		display: inline-block;
	}
}
```
cameraxviscera · Member · Jul 22, 2015 at 7:46 pm
Copy link
Thanks for the help and quick reply!

I tried that bit of CSS and something strange happens: it works and appears centered on the admin side, but after clicking save and reloading my website, the links still feed from the left. Any ideas about that?

Lastly: any luck with getting the date/comment info to show next to the pictures under my “recent articles”?

Again, I really truly appreciate all the help!
thesacredpath · Member · Jul 23, 2015 at 7:29 am
Copy link
Hi, I just went into your customizer and added the above CSS and saved and then visited your site and it works and centers the menu. I did notice that you have only the first line of the code I have above in your custom CSS at the bottom, not the entire code. Not sure if you deleted part of it or not.

Can you try adding it again? If it doesn’t show centered when you look at your site, try clearing your browser cache.

For the entry meta in the Recent Articles section, add the following which puts the entry meta in a single line right below the title.
```
.recent-articles .entry-header, .recent-articles .entry-summary {
    width: 100%;
}
.recent-articles .entry-header .entry-meta {
    width: 100%;
    display: inline-flex;
}
.recent-articles .entry-header .entry-meta .entry-date, .recent-articles .entry-header .entry-meta .comments-link {
    padding-right: 5px;
}
```

No items found.