StyledThemes

Dimensions for header banner

Home Forums WordPress Themes – Premium Lavish Pro Dimensions for header banner

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #16957
    Sarah Stewart
    Participant

    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

    #22306
    Sushil Adhikari
    Moderator

    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

    #22307
    Sarah Stewart
    Participant

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

    #22308
    Sushil Adhikari
    Moderator

    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

    #22309
    Sarah Stewart
    Participant

    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

    #22316
    Sushil Adhikari
    Moderator

    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

    #22318
    Sarah Stewart
    Participant

    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

    #16958
    Sushil Adhikari
    Moderator

    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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.