Home › Forums › VW Theme › VW BLOG PRO THEME › VW Blog Main Banner
Tagged: Main Banner, VW Blog
I’ve uploaded my banner image at the requested dimensions 1284×274, but the theme keeps blowing it up so big it doesn’t fit right on the page. This didn’t happen with the demo version of the theme.
https://www.responsetoworship.com
Also is this all I’m supposed to have for the header.php file? It looks quite short compared to the demo theme’s header.php?
<?php /** * The Header for our theme. * * @package vw-blog-pro */ ?><!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width"> <link rel="profile" href="https://gmpg.org/xfn/11"> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <header id="masthead" class="site-header"> <!-- before header hook --> <?php do_action( 'vw_blog_pro_before_header' ); ?> <?php get_template_part('template-parts/header/content-header'); ?> <?php get_template_part('template-parts/header/main-banner'); ?> </header>
Hi Shanonx,
As per your query, we have seen your screenshot and yes in header.php you will get this much code.
For homepage header code, we are giving you some easy steps to get it.
Go to Dashboard >> Appearance >> Editor >> Template parts >> Header >> In which you will get two files of header.
If you need any other help please let us know.
Thanks
I was able to get the banner image to work fine on my main page, but on my other pages it is cut off.
https://responsetoworship.com/about/
Above should be an example.
I also noticed that the banner images also doesn’t scale on mobile and isn’t responsive?
I tried adding:
#header { background-attachment: inherit; background-size: 100%; }
This helped some, but makes the image be taller rather than wider when on a phone screen.
Follow the given steps to manage the height of the image in mobile view:
Go to Dashboard >> Appearance >> Customize >> Additional CSS and paste the given code
@media screen and (min-width:425px){ .pad_box { padding-bottom: 0em !important; } }
If you need more clarification or have any other question please feel free to ask.
Thank You.
.
