How can you centre the background on the left on mobiles - see preview? | XM Community
Skip to main content
Question

How can you centre the background on the left on mobiles - see preview?

  • May 28, 2020
  • 2 replies
  • 107 views
AlexPanic
Level 1 ●

Hi,

I have used a CSS and managed to get it nice on the actual preview on Qualtrics. Seems to work also on androids. But why when I open the survey on my iphone looks horrible?

I attach a picture of how the preview should be and a picture of my iphone to show how horrible it is.

What I aim for:
Screenshot 2020-05-28 at 14.18.12.pngWhat I have:
image0.png

This is the CSS I have used (please note that I am a newbie and never used CSS before)

.Skin, #SurveyEngineBody {
background:final.jpg!important;
background-size: cover;
background-repeat: no-repeat;
background-position: left;
}

.Skin #SkinContent {
background:final.jpg!important;
}

.Skin .SkinInner {
background: transparent!important;
}

@media (min-width: 1200px) {

.bgimg {
background-position: left left;
}


@media (min-width: 992px) and (max-width: 1199px) {

   .bgimg {
background-position: left left;  }
}

@media (min-width: 768px) and (max-width: 991px) {

     .bgimg {
background-position: left left;   
}



@media (max-width: 767px) {

     .bgimg {
background-position: left left;
}


@media (max-width: 480px) {
Thank you!
Alex

2 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • May 29, 2020

AlexPanic
Your CSS is missing some } symbols, but maybe it is just because it wasn't formatted as code.
Anyway, the size of the image may be tripping up Safari on the iPhone. You could create a different, smaller background image specifically for mobile phones then add it as the background in your max-width:480px media rule.

AlexPanic
Level 1 ●
  • AlexPanic
  • Author
  • Level 1 ●
  • May 29, 2020

Hi,
Thanks for answering. It does not work on Chrome, Opera, Mozilla, those that I tried. Seems iphones have issues with this as the system does not 'contain' the picture and ends up over zooming it. Even with smaller background was the same.
This seems to have sorted it:

body#SurveyEngineBody:after{
   content:"";
   position:fixed;
   top:0;
   height:100vh;
   left:0;
   right:0;
      background: url(add) center center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
background-repeat: no-repeat;
background-position: left top;
}

Terms & ConditionsAccessibility statement