Mobile header picture and text

Hi there

Please could you assist me. I am very happy with my website header image, text etc on web version. I just want two small adjustments to be done on the mobile version but I do not know how.

On the mobile version the header image is not really visible that well and if there was some way for me to at least make some of the items (the plants etc) on the image show without having to crop the actual web image that would be great.

And then I wanted to ask if there was any way of making the main header text: “For a professional and personal virtual assistant experience say yes2day” to move up a bit on the mobile version?

I have attached an image of what it looks like right now:

My url is: www.yes2day-va.com

Many thanks in advance

Best,
Melissa

Hi Melissa,

Background image is set to cover available space which is default property for background images, and there is nothing you could do here, because setting it to contain instead will display small image above text, but if you want to try apply css below:

@media (max-width: 667px) {
    .elementor-279 .elementor-element.elementor-element-5b9dfebc {
        background-size: contain !important;
    }   
}

and result should look like this https://www.screencast.com/t/uJhAmo348t .

For text position you can reduce top and bottom padding which is currently set to 200px, so following css will reduce it just for mobile:

@media (max-width: 667px) {
    .elementor-279 .elementor-element.elementor-element-5b9dfebc {
        padding: 100px 0px 100px 0px;
    }   
}

Result https://www.screencast.com/t/dgTqPISLRD

You can apply css codes from Appereance > Customize > Additional CSS field.

Best Regards!

Hi There!

I can’t thank you enough for this, it worked perfectly :slight_smile:

Have a wonderful day

Best,
Mel