Image displaying differently on different devices

Hi there,

I have removed our header slider as I wanted to add more text over the picture and I was limited to just two lines.

I have added a section with a background image and put the text on top. It looks good on my desktop, however, on a different desktop the image is cropped and blurry and on a mobile device the image is zoomed in and only shows the middle of the image.

Is there a way to:

a) Add more text over a header image or slider? (in addition to the site title and tagline)

or

b) fix the image to stay full size regardless of screen size or settings?

The website is: www.improvit.com

Many thanks in advance,

Sarah

Hello Sarah,

Add more text over a header image or slider? (in addition to the site title and tagline)

You can try to add this CSS code in Customize → Additional CSS section (it will affect all slides):

#slideshow .text-slider .subtitle::after {
    content: "Third section on the default Sydney slider";
    display: block;
}

fix the image to stay full size regardless of screen size or settings?

Please check the Set the Website Background Size section on this page:

Kind Regards, Roman.
aThemes Support

Great, thank you Roman!

1 Like

You are welcome! :slight_smile:

Kind Regards, Roman.
aThemes Support