Home › Forums › Pro Themes › Clean Corporate Pro › Header Image size smaller after removing page title

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 15, 2017 at 7:19 pm #58383
    Jesssica Anderson
    Participant

    I’ve uploaded header images at the suggested size of 1920×500, yet when I remove the page title via custom CSS (that I got from a previous question on here), the image crops down quite a bit. I’d like it to remain at 500px at least at desktop view (and scale appropriately for responsive).

    I tried #custom-header{ height: 100%;} which didn’t work. Forcing it to be 500px works but then it isn’t responsive. Help? Here is a look: https://www.magnoliasofsantee.com/activities/

    November 15, 2017 at 11:18 pm #58404
    wensolutions
    Keymaster

    Hello @jsslanders,

    Please use below given CSS to adjust your header image in both desktop and responsive view.

    For this go to Admin Panel > Appearance > Customize > Additional CSS and paste below given CSS

    #custom-header {
    padding: 176px 0 100px;
   }

@media only screen and (max-width: 479px)
{
#custom-header {
    padding: 32px 0 25px;
}
}

    Hope this helps .

    Best Regards!!

    November 17, 2017 at 12:13 pm #58551
    Jesssica Anderson
    Participant

    Thank you for the CSS, however I now think I misunderstood my problem — apologies for that.

    I think the real problem is when I expand the desktop view very wide (like on a 27″ monitor), it it is zooming in on my header image, therefor cropping it dynamically. On the theme’s demo site, the header image just shows more of the width of the image—essentially it crops a portion of the image when at a smaller desktop view. I’m guessing it has to do with the image size, however I’ve uploaded it at 1920×500 so I don’t understand why this is happening. I even tried uploading a larger/wider image and it just crops it down to 1920×500 regardless. (This is with or without your custom CSS).

    Another issue I caught, when I resize the browser to tablet size, it is tiling the header image on top of each other. The theme’s demo site is also doing this, it’s just hard to see because the images are so dark.

    Finally, I’m running a child theme so that I could customize some other items. Does placing the custom CSS in the “Additional CSS” section replace the need for a child theme?

    Thanks and sorry again for the confusion.

    November 19, 2017 at 1:22 am #58655
    wensolutions
    Keymaster

    Hello @jsslanders,

    Since the header image is used as the background image, it gets zoomed when the screen is stretched .

    Also since your Header image width is 1920 px we have provided the CSS to adjust the header image up to the screen size of 1920 px width. For this just add below given CSS. 

    @media only screen and (max-width: 1920px) and (min-width: 1360px)  {#custom-header {
    min-height: 460px;
    background-size:contain;
}
}

    But it will again get stretched if the screen size is more than 1920 px. If your screen size is more than this then you need to upload the image of width greater than 1920 px .

    As for the placing of CSS you can either place it in Additional CSS or Child theme, both the option wil work . But the CSS that is placed in the Additional CSS will be executed at first . So you have to either place the CSS in Additional CSS or child theme but not in both .

    Hope this helps .

    Best Regards!!

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