Small screens header image on the HP is distorted


#1

Hi,

why the small screens header image on the HP is distorted on mobile device?
I tried different image sizes but it’s still distorted.

http://broadhurstagency.com

Thx, Regards
Valérie


#2

Hello Valérie,

You have this additional CSS that stretches the image:

.small-header {
    min-height: 350px;
}

Also you have this:

.header-image a.button.header-button {
    margin-top: 20px;
}

…and this:

a.button.header-button {
        font-size: 12px;
        padding: 8px 14px;
        margin-top: 0px;
    }

Please try to remove all that code and add only this:

a.button.header-button {
    font-size: 12px;
    padding: 8px 14px;
    margin-top: 10px;
}

Kind Regards, Roman.


#3

Hello Roman
I thank you for your answer but the problem is different now. The image is not distorted but the alignment of the titles is much too tight, the button is hidden, the text too large and the logo in the customer’s head. I need more space at the top and bottom. And they overlap? How can I make this all cleaner?

http://broadhurstagency.com
Kind regards Valérie


#4

Hello Valérie,

Now you see the reason why Astrid has stand-alone mobile header by default :wink:

So I would suggest you to revert to default mobile header behavior.

If you agree, try to remove the following additional CSS code.

.header-image .header-info {
    top: 35% !important;
}
@media only screen and (max-width: 1024px) {
	#masthead {
		position: absolute !important;
		padding: 0;
		background-color: transparent;
	}
}

Kind Regards, Roman.


#5

Hello Roman,
Thanks for the mobile devise, I changed the position of the button and now as the header is blue, could we reduce its height. But an other problem appears with the PC devise. The title “Laurent benoit” is too high and hides my client’s face. How can you lower the title without changing the position of the image? In addition, could we remove the thread from the header that runs through the entire screen, or raise it closer to the logo?
The big differences between PC and mobile devises are complicated to manage. Thank you for your help.


#6

Okay, try to add this:

#masthead {
    padding: 0;
}

@media (min-width: 1025px) {
    .header-info {
        top: 40%;
    }
}

Kind Regards, Roman.


#7

It’s great !!! thank you so much. Your help is wonderful. The last pb is the blurry logotype. I ask several times but it’s quite the same quality? I don’t understand.

Regards
Valérie


#8

You are welcome Valérie!

Please create a new topic with screenshots for your logo issue.

Kind Regards, Roman.