Header not resizing argent theme

  • Unknown's avatar
    yourwaterinsocal · Member ·

    I created a header image for the argent theme and used the reccomended size. However, the ends are getting cut off on certain size computer screens. It’s cutting off the sides. Can someone help and send me code to adjusting this. The site is:
    Yoursocaltapwater.org

    I’m nt good with code; help is greatly appreciated

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, you have two media queries in your custom CSS right now. Replace those with the following. 

    @media screen and (min-width: 768px) {
	.site-branding {
		padding:7.75em 0;
		background-size: contain;
	}
}
@media screen and (max-width: 768px) {
	.container {
		max-width:100%
	}
	.content {
		width:100%
	}
	.sidebar {
		width:100%
	}
	.site-branding {
		background-size: contain;
		padding: 3.55em 0 !important;
	}
}

    You will likely need to include a few more media queries to adjust the top/bottom padding on the image so that the area the image is in matches more closely with the image height itself.

  • Unknown's avatar
    yourwaterinsocal · Member ·

    Thank you, I will test on various size screens and see how it appears.
    Also, would you be able to help me shorten the margins for the blog post text and titles? I would like to fill the space more widely, versus having it in a narrow area in the center.

  • Unknown's avatar
    thesacredpath · Member ·

    The following CSS will allow you to adjust the width of the content. One thing to keep in mind when doing this is that for the best reading of text, it should be kept roughly between 500 and 750px in width (it’s a bit more complex than that, but this works for a general rule). 

    .blog .hentry, .archive:not(.post-type-archive) .hentry, .search .hentry, .single-post .hentry, .single-post .comments-area, .single-post .post-navigation {
    max-width: 660px;
}

    The above covers posts. If you also wish to adjust page content, such as your about page, then you would also use the following. 

    .single-jetpack-portfolio .entry-header, .page-header, .single-jetpack-portfolio .entry-content, .page-content, .page .entry-meta, .single-jetpack-portfolio .entry-meta, .comments-area, .post-navigation, .posts-navigation {
    max-width: 660px;
}

    If you adjust the width, say to 960px (an increase of 300px) then you would want to add 300px to the Media Width in the field below the CSS edit area, which as a standard is 780px, so you would enter 1080px in that field.

  • The topic ‘Header not resizing argent theme’ is closed to new replies.