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

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

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.

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;
}

Leave a Reply


Terms & Conditions