Jumbotron background image not scaling on iPhone 6

Illdy
1

I know that someone resolved this issue a few days ago. I’m not a web designer so I am unable to try the same solution. I do not know enough about scripts, but might be able to resolve if someone explained in more detail.

Can someone help please. I also see a similar problem on iPhone 5.

Thanks

Regards

Judith

2

Hello there,

I hope you are doing well today.

You can use the following CSS code to fix the image scaling by going to Appearance > Customize > Additional CSS and pasting it there.


front-page-section .section-header h3 {
 line-height: 1.5;
}

@media (max-width: 1600px) {
 #header .bottom-header {
  padding-top: 100px;
  padding-bottom: 100px;
 }
}

@media (max-width: 1024px) {
 #header .bottom-header h2 {
  font-size: 40px;
 }
}

@media (max-width: 767px) {
 .top-header .col-sm-2 {
  display: inline;
 }

 #header .bottom-header .header-button-two {
  padding: 0 10px;
 }

 .top-header .col-sm-10 {
  display: inline;
  float: right;
  clear: both;
 }

 #header .bottom-header .header-button-two {
  font-size: 16px;
 }

 .custom-logo {
  width: 200px;
  height: auto;
 }
}

@media (max-width: 320px) {
 .custom-logo {
  width: 100px;
  height: auto;
 }

 #header .bottom-header .header-button-two {
  font-size: 12px;
 }
}

@media only screen and (max-width: 1242px) {
	#header {
		background-attachment: initial !important;
	}
}

Best Regards,
Support

3

Hi

Thank you so much, it’s all resolved now.

Regards

Judith

4

This solution worked well for me for width (progress!) However, it squishes the image horizontally. How can I get it to scale and keep the correct aspect ratio?

5

I found a workaround by using the “featured images” for headers rather than rotating through blog headers.

6

Hi,

Glad you got it working. :slight_smile:

Let us know if you have any other questions.

Thanks,
laranz.