Home › Forums › Pro Themes › Magpaper Pro › Decrease Height of Archive Header Image
- This topic has 18 replies, 3 voices, and was last updated 4 years ago by
wensolutions.
-
AuthorPosts
-
March 10, 2020 at 9:44 am #118103
Bob Gonsalves
ParticipantWe would like to decrease the height of the Archive header image (found at Customizing — Theme Options — Blog/Archive). This is the image that shows up at the top of each category page.
Is there custom CSS code for this?
Thank you in advance.
March 11, 2020 at 6:12 am #118177wensolutions
KeymasterHello,
The header will adjust the height according to the image height so once use the image of smaller height.
Even if this doesn’t resolve the issue, kindly let us know so that we will provide you with the CSS.
Regards.
March 12, 2020 at 1:47 pm #118308Bob Gonsalves
ParticipantThank you for the response. We tried uploading an image with very little height and the image was expanded still.
Can you please provide the custom CSS code to fix this issue as you mentioned?
Thank you in advance.
March 13, 2020 at 12:46 am #118330wensolutions
KeymasterHello,
Could you please provide us your site URL so that we can provide you with a precise fix that will help you decrease the size of the image
Regards.
March 13, 2020 at 11:02 am #118362Bob Gonsalves
ParticipantHere is a link to one of our category pages:
https://trailer-boats.com/category/boating-news/
If possible, we only want the image to be as thick as the font size.
Thank you in advance.
July 6, 2020 at 10:30 am #128056Kingston Kingsley
ParticipantHi,
I am interested in doing the same for my site as it is not adapting to the change in image size– please could you provide the custom CSS for editing the header image size (on any page).
Thanks
July 7, 2020 at 1:57 am #128120wensolutions
KeymasterHello @KJKINGSLEY,
Actually, we are not quite clear with your queries so please explain in detail with proper screenshots and your site URL.
Regards.
July 7, 2020 at 10:32 pm #128146Kingston Kingsley
ParticipantHi,
The site is https://www.therocketsurgery.org/blog/ and I’m referring to the header images at the top of each of the pages (Archive/blog, About, Get Involved, etc.). I would like to reduce the height of the images by about 1/3rd.
Screenshot: https://ibb.co/SRWrdqCThanks!
July 8, 2020 at 2:52 am #128264wensolutions
KeymasterHello,
Regarding your query, you can decrease the height of the header image from pages, for this add below-given CSS by going to Admin Panel > Appearance > Customize > Additional CSS.
.page #page-site-header { padding: 135px 0; }
Hope this helps.
If you have further queries, let us know.
Regards.
July 28, 2020 at 11:36 am #129720Kingston Kingsley
ParticipantHey, I have more questions! (Thanks for your help so far 😉 )
Firstly, how can I adjust the size of the header image (as above) for all blog posts? I.e., when viewing a blog post page the featured image shows at the top and is too large.
Secondly, how can I adjust the width of the content of blog posts? I would like them to be more central, with more padding at the sides (like https://www.brainpickings.org/).Thanks again,
KingstonJuly 29, 2020 at 3:17 am #129756wensolutions
KeymasterHello @kjkingsley,
Please add below-given CSS by going to Admin Panel > Appearance > Customize > Additional CSS.
.site-branding{ padding: 0px 35px; }
Adjust the px as per your requirement.
Hope this helps.
Thank you.
July 29, 2020 at 5:16 pm #129795Kingston Kingsley
ParticipantHi,
Sorry, but that is the wrong adjustment. Perhaps I confused you when I said ‘header’, what I mean is the “featured image” for both pages and posts. A few weeks ago (above) you gave me the CSS to add padding and reduce the height of the featured image(s) on web pages.
Actually these featured images (on both pages and posts) have been causing me a lot of problems with sizing and inconsistency, since for example with blog posts the image will be displayed differently on the actual blog page than it is when it is promoted in the hero section, or as a thumbnail in the archive.
What I need is the CSS/code to make all the featured images on webpages or blog posts automatically fit the original image size (instead of cropping them etc), or a solution that avoids different images being displayed.
Here is a link to the ‘featured image’ component I mean – https://ibb.co/XtZ9FNW
As an example of the image resizing, see the hero post on therocketsurgery.org, and how it appears differently to the image at the top of the post – https://www.therocketsurgery.org/1-phylos-sophia-love-of-wisdom/ – (I had to add a white border to make it fit at the top of the post)July 30, 2020 at 8:15 am #129858wensolutions
KeymasterHello @KJKINGSLEY,
As for now, the feature to adjust the image is not available. Please use the CSS for now.
However, we will make the enhancement in the future regarding the header image.
Thank you.
August 6, 2020 at 9:54 am #130742Kingston Kingsley
ParticipantHi again,
Is there any way I can remove the featured (header) image from the top of blog post pages only? Such as maybe the same code you gave me before, except for blog posts not for general site pages, and setting the height to zero?
e.g. with the following, except the correct replacement for “page” to make it only effect blog post pages:
.page #page-site-header {
padding: 135px 0;
}August 7, 2020 at 1:46 am #130766wensolutions
KeymasterHello,
Regarding your query to remove the featured image from the blog page is possible with the CSS below following the path Admin Panel > Appearance > Customize > Additional CSS,
.blog div#page-site-header { display: none; }
Hope this helps.
If you have further queries, kindly let us know.
Regards.
-
AuthorPosts
- You must be logged in to reply to this topic.