Changing Front Hero Image

Hello,

Please add this extra CSS code in Customizer -> General Settings -> Additional CSS :

??.backstretch-item img{
width:100% !important;
height:100% !important;
object-fit: fill !important;
position:unset !important;
}

For your inner pages title, please add this CSS code:

.mesmerize-inner-page h1.hero-title {
font-size:2.2rem!important;
}

You can adjust the value of font-size according to your needs.

Thank you,
I copied and pasted both codes, but neither of them didn’t really work…

Is the image 1024 x 426 pixel ok for this front page?

Hello,

The size for the hero image is 1920 x 1440, but the header images are automatically scaled so that the image content will be displayed on your website properly on all devices.

Are there any other reasons that you can think of for not being able to fit the picture?

Hello,

Can you show me in a screenshot the added CSS code to see if there is any missing bracket ?

The code should change the aspect ratio of your slideshow images.

Hi

Thank you for you r help.
I just didn’t know how to put a screen shot on the website, so I just sent you through email.

The code for the front page hero is still not working, but the one foe the size of the title in inner pages is working now.

Thank you
Emi

Hello,

I have checked your front page and it seems the CSS code does apply there.

Were you able to solve the issue also for the front page?

Actually no not yet.
The width is ok but height doesn’t fit.
If I try to change the percentage of above area and below area then the width doesn’t fit too…

Hello,

You can try to further adjust the height with the below CSS code:

@media screen and (min-width: 1024px){
.backstretch{
height:600px !important;
}
}

Thank you for helping me out a lot.
I just sent you images of each screen: PC, tablet and phone through email.

Thank you:)

Hello, thank you so much for your help.

I think I was able to put the image right for PC and smart phone now.
But the screen for tablet doesn’t seem to be right.
Is there any way to fix this?

Also is there any way to hide the website name on top left?
+ If it’s possible I would like to hide the menu on the PC so that it wont bother the hero image.
(not exactly hide but want to show the menu like the one on smart phone)
+Is there any way to change the color of the top bar?

Emi

Hello, I hope someone can help me with the Qs I asked …

Hello,

You can have the mobile menu on desktop by going to Customizer -> Navigation -> Mobile ( Offscreen ) Navigation -> Show offscreen navigation on desktop.
?
?Please see https://cristian-extendstudio.tinytake.com/tt/Mzc5ODI3Ml8xMTU5NDM2OQ

Also please add this CSS code:

a.text-logo {
display:none!important;
}

.header-top-bar{
background-color:blue!Important;
}