Jumbotron not responsive

Illdy
1

Hi
The jumbotron image on the front page isn’t responsive. I’ve tried many versions of code and nothing is helping. I understand it’s a background image. Can you please help please?

2

hey there

Hope you are having a good day and thank you for your question :slight_smile:
Please add this CSS in appearance - customize - additional CSS

#header.header-front-page {
    background-position-x: left;
}

Thanks!
Colorlib Support Team

3

Thank you for getting back to me. Unfortunately it hasn’t worked. It moves the image to the right slightly on both desktop and mobile. On mobile, the full image still cannot be seen.

Thanks.

4

Good evening

Sorry but that’s not possible physically, the image is almost square and the mobile device is a vertical rectangle, its impossible to perfectly fit square in such a figure, that’s why we have this problem, that’s why it’s better to use background image without any character or text on it :frowning:

5

Ok, thanks. Can I point mobile devices in the direction of an alternative image using code?

6

hey there

Maybe yes, please add this CSS in appearance - customize - additional CSS

@media only screen and (max-width: 768px) {
#header.header-front-page {
    background-image: url(https://www.jennywing.com/wp-content/uploads/2018/03/Copywriter-Communications.jpg) !important;
}
}

Thanks!
Colorlib Support Team

7

Thank you, the code with a resized image has worked. One more question, I have used the following code to resize ‘Jenny Wing Creative Communications’ for mobile. What code do I need to resize ‘Freelance copywriter…’?

Thanks.

8

hi Jenny

Nice to hear :slight_smile:
Sorry but where it the section “Freelance copywriter…” its definitely not on homepage :frowning:

9

The Freelance copywriter text is at the top of the homepage underneath the text ‘Jenny Wing Creative Communications’ - can you see it?

Many thanks.

10

Hello there,

I hope you are doing well today.

You can use this CSS to change the font color:


#header.header-front-page .bottom-header .section-description span {
    color: red !important;
}

Best Regards,
Support

11

Thank you but I actually want to resize this piece of text for mobile…#

Many thanks.

12

Hi

Then you have to use this one:

@media only screen and (max-width: 768px) {
#header.header-front-page .bottom-header .section-description span {
font-size:12px;
}
}
13

Thank you, unfortunately the code isn’t making any difference to the font size

14

I’ve noticed that since I changed the code the image no longer shows on the ipad, it’s just a black background…

15

Hi,

It seems you’re adding the color and the font size along with the description, http://take.ms/Pw6Je try to change the color in there, or remove the color from it and use the Custom CSS.

Let us know,

Thanks,
laranz.

16

Hi there

Now I cant see any image even on the desktop version, most probably its removed, my suggestion is t change your approach and use a different image, playing with the different images for different devices on different breakpoints does not have good results in most cases

17

Thank you. The problem was the max screen width which I set at 768px. I’ve changed it to 1024px and the image has reappeared. I still can’t reduce the size of the text though.

18

Hi there,

The size of the text is determined by some embedded CSS on a span tag around the image. The font size value on it is x-large and its blocking any other CSS we can give you from woking to adjust the font size in mobile.

See attached screenshot of what we mean.

Can you remove that font size x-large option.
Then use this CSS to change the font size.

@media screen and (max-width: 768px){
body #header .bottom-header .section-description strong span{
   font-size:15px;
}
}

Hope this clears things up.