Basckground picture not responsove for mobile

Hi there,

I don’t seem to get the background picture on my website responsive for mobile. The url is www.chula.nl.

Aftre reading some other topics on this issue I added the following css code but that didn’t do the trick. What else can I do? Thanks for your reply!

@media only screen and (max-width: 900px){
#slideshow{
height: 400px !important;
}
}

@media only screen and (max-width: 600px){
#slideshow{
height: 210px !important;
}

.text-slider-section{
top: 40%;
}

}

#slideshow .slides-container .slide-item{
background-position: top center;
background-size: 100%;
}

Hello there,

Your header background has different selector. Try the following CSS code:


.dslc-modules-section.dslc-full{
  background-size: 100% !important;
  background-position: top center;
}

@media only screen and (max-width: 900px){
  
  .dslc-modules-section.dslc-full{
    height: 400px !important;
  }
  
}

@media only screen and (max-width: 600px){
  
  .dslc-modules-section.dslc-full{
    height: 210px !important;
  }

}

Please do adjustment as needed.

Regards,
Kharis

Thank you Kharis, it did the trick for the background picture, so I (you) solved that problem.

But now the text (welkom) and the social media buttons are shown below the picture. Is there a possibility to change that? I don’t mind the social media buttons that much, but I’d love to have the welkom-text published on the left side in the background picture.

http://www.chula.nl

Thanks!

Here I am again. When I view the site on an Ipad, the picture is all right but there is a white space below the picture. How can I change that?

Thanks for your help & reply!

Hello there,

I would like to apologize in advance for the delay.

Try to apply the following CSS code:


html, 
body{
  overflow-x: hidden;
}


@media only screen and (max-width:980px){
 
  .dslc-text-module-content *{
    text-align: left !important;
  }
  
  .dslc-text-module-content h2{
    margin-left: 10px !important;
  }  
  
  .dslc-modules-section.dslc-full{  
    background-size: 170% !important;
  }  
  
}  

@media only screen and (max-width:767px){
   .dslc-modules-section.dslc-full{  
    background-size: 170% !important;
    height: 286px !important;
    padding: 0 !important;
  }  
  
  .dslc-text-module-content h2{
    font-size: 40px !important;
  }    
  
}  

@media only screen and (max-width:479px){
  
  .dslc-modules-section.dslc-full{  
    background-size: 170% !important;
    height: 201px !important;
    padding: 0 !important;
  }  
  
  .dslc-text-module-content h2{
    font-size: 30px !important;
  }      
  
  .dslc-social{
    position: relative;
    z-index: 9;
  } 
  
  #dslc-content #dslc-module-253 ul.dslc-social {
    text-align: center;
  }  
  
  #dslc-content ul.dslc-social li:first-child{
    margin-left: 30px;
  }
  
}

You would need to clear your browser’s cache before reloading yours site.

Let me know how it goes.

Regards,
Kharis

Hi Kharis,

Thanks for your help, it did the trick on the white spacing. But now I am back on square one with mobile (and portrait on the iPad): the background picture is not responsive. What am I doing wrong? Could it be that I have to do something with Html on the website itself, in order for the picture to show up responsive?

Sorry for all these questions, I really appreciate your help!

Regards,
Els

Hello Els,

Try to replace the custom CSS code I previously suggested with the following:

html, 
body{
  overflow-x: hidden;
}


.dslc-modules-section.dslc-full{
  background-size: 100% !important;
  background-position: top center !important;
}  


@media only screen and (max-width:980px){
 
  .dslc-text-module-content *{
    text-align: left !important;
  }
  
  .dslc-text-module-content h2{
    margin-left: 10px !important;
  }  
  
  .dslc-modules-section.dslc-full{  
    background-size: 170% !important;
  }  
  
}  

@media only screen and (max-width:767px){
   .dslc-modules-section.dslc-full{  
    background-size: 170% !important;
    height: 286px !important;
    padding: 0 !important;
  }  
  
  .dslc-text-module-content h2{
    font-size: 40px !important;
  }    
  
}  

@media only screen and (max-width:479px){
  
  .dslc-modules-section.dslc-full{  
    background-size: 170% !important;
    height: 201px !important;
    padding: 0 !important;
  }  
  
  .dslc-text-module-content h2{
    font-size: 30px !important;
  }      
  
  .dslc-social{
    position: relative;
    z-index: 9;
  } 
  
  #dslc-content #dslc-module-253 ul.dslc-social {
    text-align: center;
  }  
  
  #dslc-content ul.dslc-social li:first-child{
    margin-left: 30px;
  }
  
}

Let me know how it goes.

Regards,
Kharis