My enfold website does not fit to a smartphone

Hi,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

@media only screen and (max-width: 480px) {
.avia-fullscreen-slider .avia-slideshow>ul>li { 
background-position: 50% 50%; 
}}

Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.

Best regards,
Yigit

Hi,

If you want greater control of the image used for smaller devices you can add another color section to only show on mobile devices, and upload an image better adapted to that screen size. Give your color sections unique ID’s in the element options, then you can use CSS like this to show/hide them for the correct screen sizes:

@media only screen and (min-width: 768px) {
#section-desktop {
  display:block !important;
}
#section-phone {
  display:none !important;
}
}

@media only screen and (max-width: 767px) {
#section-desktop {
  display:none !important;
}
#section-phone {
  display:block !important;
}
}

Best regards,
Rikard

Hi,

Yes, I can tag our german speaking moderator for the topic. Was there any particular part you didn’t understand? I can try to explain it in another way maybe.

Best regards,
Rikard