Dimensions for header banner

[Sarah Stewart]

Hello
Please could you provide the dimensions for the header banner you used in the demo for the Lavish Pro? The suggested 2560 × 400 doesn’t render properly on my site albeit have tried that and different dimensions.
If you can also provide the percentages for mobile rendering it’d be appreciated
Thanks

[Sushil Adhikari]

Hi Sarah Stewart,

Could you please provide your site url so we can suggest you the reason as well solution of rendering image. Our theme is fully responsive so you needn’t have to worry about the percentage of image dimension on mobile devices.

Thanks

[Sarah Stewart]

Hi, it is sarahstewartcoaching.co.uk. Images are placeholders at the moment, thus the watermark. Thanks!

[Sushil Adhikari]

Hi Sarah Stewart,

You can achieve same by placing Text widgets on Banner wide widget position. On the text widget you can add following image HTML tag:

If you follow this process you will get full responsive image with original height and width

Note: Make sure you are using header style 1 [@see Go to dashboard->Appearance->customize->Header setting->Header style].

Hope this works for you and let us know how it will goes

Thanks

[Sarah Stewart]

Hello Sushil,
Thanks for the guidance. I’ve followed your recommendation and worked partially. If I include the recommended banner dimensions (2560×400), the images are not responsive, thus I left the dimensions with just ” ” in the image HTML tag. However, although the image is now responsive, there is a blue area below the banner. How can I get rid of it?
Many thanks

[Sushil Adhikari]

Hi Sarah Stewart,

Sorry to say you that we are unable to find out blue color below the banner. We have attached you a screen shot please have a look on this. It will much better if you share us a screen shot of the page where your are getting problems, so it will be easy for both of us to find a solution as soon as possible.

Thanks

[Sarah Stewart]

Hello again,
I think I cracked the issue. The height of the image was increased to 1000px and now there is no blue area. The images aren’t rendering as big in mobile and tablet but are legible enough.
Any recommendation on how I can make the images render bigger in mobiles/tablets?
Thanks

[Sushil Adhikari]

Hi there,

You need to do some tweak in media query @SEE for reference:
Media Queries for Standard Devices

Also you can try by adding this css on child theme style.css file to increase height of image on mobile devices with screen width less than 1030px

@media screen and (max-width:1030px) {
	
	#fr-banner .textwidget img {
	  height: 500px !important;
	}
}

Note: Please use child theme style.css to add this custom css, so your changes will not lost on theme update.

Thanks

[Author]

Posts