Color Section – Background Image not Responsive

Hey Snerp,

They look responsive to me, but you will always lose some image data because of the differently sized screens so it won’t look exactly the same on desktop as on mobile or tablets. I would recommend you to add text as separate image or as html. If you want greater control of how the sections look on mobile you can create separate sections and upload images better adapted to mobile screens and then hide/show the correct one using CSS. Let us know what approach you would like to take and we’ll help you if you should run into problems.

Thanks,
Rikard

Hi,

You can create the extra sections just like the other ones you have made but you will have to give them a unique id in the element options, for instance: section1-mobile and section1-desktop. You can then hide/show them by using the following CSS:

@media only screen and (min-width: 768px) {
#section1-mobile {
display:none !important;
}
}

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

Note that the # sign does not go in the unique ID field in the element options. If you need to hide several sections you can add more after the ID identifier like this: #section1-desktop, #section2-desktop, #section3-desktop

Best regards,
Rikard