Remove white space on top in categories (twenty fourteen)

dubbedperceptions · Member · Sep 21, 2015 at 3:11 pm
Copy link

Add topic to favorites
Hello
I used this css code to remove the category name from displaying:
.archive-title {
visibility: hidden;
}

.archive-title span {
visibility: visible;
float: left;
}

This worked fine. But now I have a white space between the header and the first post:
http://dubbedperceptions.com/category/create/

How to get rid of this white space in the twenty fourteen theme?

Thank you, Hynek
p.s. I am not fluent in css!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Sep 21, 2015 at 9:09 pm
Copy link
Hi there, change your .archive-title rule to .archive-header like this
```
.archive-header {
    display: none;
}
```
and then add this one.
```
.archive #primary {
    padding-top: 0;
}
```
dubbedperceptions · Member · Sep 21, 2015 at 9:29 pm
Copy link
Thank you

.archive-header : works well. (It actually does the same think like “.archive-title”)

.archive #primary: still leaves some white space between header and featured image of first blog:
http://dubbedperceptions.com/category/consult/

I was looking around and found a workaround: inserting an image into the archive space. (the image is not mine, just a place-holder)

/* insert image at top of category feed*/
.archive-header{
background-image: url(‘http://lizthefair.files.wordpress.com/2011/12/lhf-blog-header-no-tag.png’);
height: 180px;
max-width: 900px;
margin: 0;
}
h1.archive-title{
Display:none;
}

If the white space can’t be deleted completely, I might do that.

Thanks, Hynek
dubbedperceptions · Member · Sep 21, 2015 at 9:35 pm
Copy link
@ thesacredpath
Sorry! I did some wrong inserting… your solution, when applied together, works perfectly!

Thank you!
dubbedperceptions · Member · Sep 21, 2015 at 9:42 pm
Copy link
@ thesacredpath

Can you please help me to solve this:

I am also trying to make the page fully responsive to large screens. At the moment I am getting a blank space on the right:
https://dubbedperceptions.files.wordpress.com/2015/09/screen-shot-2015-09-21-at-23-39-31.png
(I took a screen shot, takes a little time to load)

How to make 20Fourteen respond fully to large screens?

Thank you,
Hynek
thesacredpath · Member · Sep 21, 2015 at 11:19 pm
Copy link
To do this, the featured image will grow as well, and on widescreen monitors, that means people may not be able to see the beginning of your content. The other thing I’ll mention is that the best width for text-based content ranges from about 500px to 750px in width. When content is wider than that, it becomes harder to read. That said, here would be the CSS.
```
#page {
    width: 100%;
    max-width: 100%;
}
.post-thumbnail img {
    width: 100%;
}
.site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content {
    max-width: 90%;
}
#site-header, #site-header img, .site-header {
    width: 100%;
    max-width: 100%;
}
```
dubbedperceptions · Member · Sep 22, 2015 at 8:02 am
Copy link
Thank you
Your points are valid! A bigger feature image means people will have to scroll down to see some text. – I will ponder my options and decide ;-)
At least I have the option now.

Many thanks! I have switched from TwentyTwelve to Fourteen and am in the process of making that theme my own… slowly I am finding my way.

Thank you for your Help,
Hynek
thesacredpath · Member · Sep 22, 2015 at 9:10 am
Copy link
Hynek, you are welcome. Let us know if you have additional questions.

No items found.