Jumbotron Section: gif (background) doesn't display correctly in mobile device

Illdy
1

Hi :slight_smile:
This is my website: http://brandinghuset.com/
I use a gif (1900px x 820px) as a background image in jumbotron section. I have 2 problems in this section:

  • I had to add text in “Entry” for allow my gif to have enough height when displays in desktop. Instead of a text, I added a lot of spaces (as you can see in the attached file). As a result, we can see a white point in the image frontpage but it is better than to see a half image when it displays in desktop…

BUT…

  • Now that I see on mobile device, gif is has been cut off (attached file)…

Where I should do for to have my gif displaying correctly in both devices? Is there a way to display the gif in full size (without being cuttet) without using the bottoms?

Thank you so much in advance for your help
Have a nice day

2

Hello there,

I hope you are doing well today.

You can use the following CSS code to fix this issueby going to Appearance > Customize > Additional CSS and pasting it there.


@media screen and (max-width: 1000px) {
#header .bottom-header {
    padding-top: 0px;
    padding-bottom: 0px;
}

#header.header-front-page {
    background-size: contain !important;
}
}

Best Regards,
Support

3

Thank you so much! It works. My gif is responsive now in both: desktop and mobile.
Just another question: Is there a way to see the entire gif without using a kind of text in “Entry”?
What I am doing is to use
 
<p style=“text-align: right;”>.</p>

as a text in “entry” for to avoid that the gif to be cut of in desktop…

Thanks a lot!

4

Hi again,
In my website under Projects, I have a different pages with a different featured image each one. BUT since I have entered the code, these features images are displaying under a general photo (attached file).

If I delete the Blog Archive Header Image…Appears a big space on white and the photo that I want to replace the general photo still under instead of up as I have it before! :frowning:

Thank you so much for your help