Docs

[BlueGraphics]

Hello!

I am having some problems setting up the final view of this site on mobile.
http://www.cucli-film.com

I cant get certain background images of some bands to adjust, so then ones that do, look completly unproportional on the overall. This is a problem mostly or specialy on vertical mobile devices,
not so on desktop.

What would you suggest i do to keep it consistent?

thank you for your comments and ideas

[Rupok]

Hi there,

It seems fine on my end. As the background-size is set to cover so it should give you the best responsiveness. But if the object is on right/left then it might not look good. You can control the background position, attachment etc. for mobile only :

You can add this under Custom > CSS in the Customizer.

@media only screen and (max-width: 480px) {
.x-section.bg-image.parallax, .x-section.bg-pattern.parallax {
  background-position: center center !important;
}
}

Hope this helps.

[BlueGraphics]

Thanks Rupok for your answer.
Nevertheless, i am not sure i got the answer i needed.

Is there a way were section 2 and section 5 can also resize to fit like section 1, 3 & 4 do?

Thank you for your help.

[Christian]

To control each section separately, you will need to add a different class (e.g. man-looking-at-bird) to each section and then add a different position for it so the previous code should be like

@media only screen and (max-width: 480px) {
.x-section.bg-image.parallax, .x-section.bg-pattern.parallax {
  background-position: center center !important;
}
.x-section.man-looking-at-bird {
  background-position: right center !important;
}
}

For more details or options for the background-position property, please see http://www.w3schools.com/cssref/pr_background-position.asp

Thanks.

[Author]

Posts