Help with Header image responsiveness

[Moore]

I having problems with my header image cutting the lady off in the image to the left.  I am also having problems with my header menu.

[Jsum]

Hi @Moore ,

I would suggest that you take this one problem at a time. 

for each problem, anyone here would need to have access to a shareable link to the page you are referencing so we can look at the code.

With the banner image issue, this is very open ended and will depend a lot on how the image is being applied. one thing I can suggest is that you sent the background position to "top left":

<div style="background-position: top left;"></div>

or 

div {
    background-position: top left !important;
}

which would cause the image to stick to the top and left of the container, meaning the bottom and right would be cropped at smaller screen sizes. 

You would need to provide more context on the issues with the navigation.

Let me know if this helps.

Need help? Hire Us Here

[Moore]

 Thank you for the help.  I tried your recommendations and that did not work. 

Sorry, for not including the link - https://www.hardenberghgroup.com/homepage-2.0

the image seems to shrink toward the left and take the lady out of the screen completely which is fine, but it only puts her halfway out on certain devices.  Is their a way to have it show another image on mobile view?  I have tried and it seems to change the header image on all pages.

[Jsum]

Hey @Moore,

Thanks for the link. I used my browser's inspector tool and created a video for you showing how the css, applied correctly, will work:  https://embed.vidyard.com/share/AFLQwuJcB4C4ELwkU9ZaGL? 

So you will need to apply:

background-position: 28% top;

on your '.row-fluid .bgimg-main' element, either inline or in your layout.css style sheet. if you go the stylesheet route, you will need to include an !important tag in order to force it to work, due to stylesheet background settings having an issue with overwriting inline background styles. You could include this to the bottom of your layout.css stylesheet:

.row-fluid .bgimg-main {
    background-position: 28% top !important;
}

and it should work.

let mek now if that helps.

Need help? Hire Us Here

[Moore]

Thank you so much for the video.  It works, but now it is really messed up on iPads and big screens with just her head showing.  Anyway to switch the image on iPads and smaller screens?

[Jsum]

@Moore ,

Honestly, the best way to do this is to create different versions of the image for the different screen sizes. Whether you do that or try to use strictly css, media queries are what you want to use to change styles (background, background-position, background-size, etc.) in your stylesheet. example:

/* main css */

div {
    background: url(image_1.jpg) no-repeat;
    background-position: 28% top;
}

/* media query to change css for tablets */
@media (max-width: 768px) {
    div {
        background-position: center top;
    }
}

/* media query to change css for phones */
@media (max-width: 530px) {
    div {
        background: url(image_2.jpg) no-repeat;
        background-position: left top;
    }
}

This is just an example though. You'd have to play around with your specific issues in order to develop the best solution.

[Moore]

Thank you for the help, but I am still having problems.  When I use the CSS you gave me it changes all my header images on the rest of site.  I am new to hubspot and it has been a little difficult finding my way around.  Here is the CSS I have for the background image:

.row-fluid [class*="span"] { min-height:1px; }
.header-container-wrapper .row-fluid [class*="span"] { min-height:0; }
.row-fluid .bgimg-main { background-size:cover; background-repeat:no-repeat; background-position: center right;; }
.row-fluid .bg-img { display:none; }

Thanks,

Chris

[Jsum]

If you just want to target that specific banner, you either need to apply the css to the header of the page (page settings), or you need to give the banner for that page a custom class specific to that page, and direct the css to that class.

[Moore]

I am sorry, but I do not see where I can add CSS in page settings on my homepage.

[Jsum · Accepted solution]

under page settings, if you scroll towards the bottom there is an "advanced settings" drop down. click that and you will find a text area for the header. apply css there inside <style></style> tags.